/* Service detail pages. Loads after about.css and reuses its tokens. */

body.service-body {
  background: #ffffff;
}

.service-page {
  position: relative;
}

/* Sayfa içi bağlantılar (Kapsamı İncele vb.). Sabit navbar başlığın üstünü
   kapatmasın diye hedef bölümler navbarın altında duracak şekilde durur.
   Bölümün kendi üst boşluğu nefes payını zaten verdiği için buradaki değer
   yalnızca aradaki farkı kapatır; böylece sayfa gereğinden fazla kaymaz.
   Navbar: masaüstü 20px + 90px, mobil 12px + 68px.
   Bölüm üst boşluğu: 116px / 84px (<=820px) / 68px (<=520px). */

.service-page .about-section[id] {
  scroll-margin-top: 24px;
}

@media (max-width: 980px) {
  .service-page .about-section[id] {
    scroll-margin-top: 0;
  }
}

@media (max-width: 820px) {
  .service-page .about-section[id] {
    scroll-margin-top: 18px;
  }
}

@media (max-width: 520px) {
  .service-page .about-section[id] {
    scroll-margin-top: 30px;
  }
}

/* Marks the open service inside the header dropdown. */

.nav-content .services-dropdown a[aria-current="page"] {
  color: var(--yellow);
  background: transparent;
}

/* Beyaz mobil cekmecede duz sari okunmadigi icin murekkebe dusuyor. */
@media (max-width: 980px) {
  .nav-content .services-dropdown a[aria-current="page"] {
    color: var(--brand-text);
    background: rgba(0, 0, 0, .05);
  }
}

/* Hero */

.service-hero.about-hero {
  background:
    linear-gradient(rgba(255, 255, 255, .74), rgba(255, 255, 255, .92)),
    radial-gradient(circle at 78% 26%, rgba(249, 200, 9, .32), transparent 40%);
}

/* Sağdaki animasyonlu akış kaldırıldı; kahraman tek sütun. */
.service-hero-inner {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.service-hero h1 {
  max-width: 640px;
}

.service-hero .hero-copy {
  max-width: 620px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.service-tags li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(33, 23, 58, .128);
  border-radius: 999px;
  color: #2b2b2b;
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 1px rgba(255, 255, 255, .9);
  font-size: 12px;
  font-weight: 650;
}

.service-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.service-ghost-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 174px;
  min-height: 54px;
  padding: 0 22px;
  border: 2px solid #e6e6e8;
  border-bottom: 5px solid #e6e6e8;
  border-radius: 16px;
  color: var(--brand-text);
  background: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
  transform: translateY(0);
  transition: filter .16s ease, border-width .12s ease, transform .12s ease;
}

.service-ghost-link:hover {
  color: var(--brand-text);
  filter: brightness(.985);
}

.service-ghost-link:focus-visible {
  outline: 3px solid rgba(33, 23, 58, .176);
  outline-offset: 4px;
}

.service-ghost-link:active {
  border-bottom-width: 2px;
  transform: translateY(3px);
}

/* ERP go-live is a verified system handover, not a generic launch. */

.service-page[data-service="erp"] .process-flow li:last-child span svg {
  display: none;
}

.service-page[data-service="erp"] .process-flow li:last-child span::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.8' width='17.6' height='12.4' rx='2.4'/%3E%3Cpath d='M8.2 20.2h7.6M12 16.2v4m-3.9-10.1 2.2 2.1 5.1-5.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.8' width='17.6' height='12.4' rx='2.4'/%3E%3Cpath d='M8.2 20.2h7.6M12 16.2v4m-3.9-10.1 2.2 2.1 5.1-5.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Scope / capabilities */

.service-scope-section {
  background: #fff;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.capability-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--about-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(48, 18, 104, .06);
  transition: border-color .28s ease, box-shadow .28s ease;
}

.capability-card:hover {
  border-color: rgba(33, 23, 58, .2);
  box-shadow: 0 22px 56px rgba(48, 18, 104, .1);
}

.capability-card .capability-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 26px;
  border: 1px solid rgba(33, 23, 58, .112);
  border-radius: 15px;
  color: var(--brand-text);
  background: rgba(249, 200, 9, .142);
}

.service-page[data-service="erp"] .capability-card:nth-child(3n + 2) .capability-icon,
.service-page[data-service="web"] .capability-card:nth-child(3n + 1) .capability-icon,
.service-page[data-service="automation"] .capability-card:nth-child(3n + 3) .capability-icon {
  color: #765a00;
  border-color: rgba(249, 200, 9, .3);
  background: rgba(249, 200, 9, .14);
}

.capability-icon svg {
  width: 22px;
  height: 22px;
}

.capability-card h3 {
  margin: 0 0 12px;
  color: #2f2540;
  font-size: 19px;
  line-height: 1.26;
  letter-spacing: -.02em;
}

.capability-card p {
  margin: 0;
  color: #6b6278;
  font-size: 14px;
  line-height: 1.7;
}

/* Outcome panel — a contained brand-purple band instead of a full-bleed
   dark section, so it sits with the card language used elsewhere. */

.service-outcome-section {
  padding-top: 66px;
  padding-bottom: 66px;
  background: #ffffff;
}

.outcome-panel {
  position: relative;
  padding: 26px 20px;
  overflow: hidden;
  border: 1px solid var(--about-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 56px rgba(48, 18, 104, .07);
}

.service-outcome-head {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-bottom: 24px;
}

.service-outcome-head .section-kicker {
  margin-bottom: 12px;
  color: var(--brand-text);
}

.service-outcome-head h2 {
  margin: 0;
  color: var(--about-ink);
  font-size: clamp(26px, 6.2vw, 32px);
  line-height: 1.14;
  letter-spacing: -.035em;
}

.service-outcome-head p {
  margin: 14px 0 0;
  color: var(--about-copy);
  font-size: 14px;
  line-height: 1.68;
}

.outcome-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid rgba(33, 23, 58, .08);
}

.outcome-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 0;
  border-bottom: 1px solid rgba(33, 23, 58, .072);
}

.outcome-item:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.outcome-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border: 1px solid rgba(33, 23, 58, .12);
  border-radius: 13px;
  color: var(--brand-text);
  background: rgba(249, 200, 9, .114);
}

.outcome-item span svg {
  width: 21px;
  height: 21px;
}

.outcome-item strong {
  display: block;
  margin-bottom: 8px;
  color: var(--about-ink);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.015em;
}

.outcome-item small {
  display: block;
  color: var(--about-copy);
  font-size: 13px;
  line-height: 1.66;
}

@media (min-width: 560px) {
  .outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 44px);
  }

  .outcome-item:nth-child(2n) {
    padding-left: clamp(24px, 3vw, 44px);
    border-left: 1px solid rgba(33, 23, 58, .072);
  }

  .outcome-item:nth-last-child(-n + 2) {
    border-bottom: 0;
    padding-bottom: 4px;
  }
}

@media (min-width: 821px) {
  .service-outcome-section {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .outcome-panel {
    padding: clamp(38px, 4.4vw, 60px);
    border-radius: 30px;
  }

  .service-outcome-head {
    margin-bottom: 40px;
  }

  .service-outcome-head h2 {
    font-size: clamp(32px, 3.4vw, 46px);
  }

  .service-outcome-head p {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.72;
  }

  .outcome-item {
    padding: 26px 0;
  }

  .outcome-item strong {
    font-size: 17px;
  }
}

@media (min-width: 1081px) {
  .outcome-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(26px, 2.6vw, 40px);
  }

  .outcome-item,
  .outcome-item:nth-child(2n),
  .outcome-item:nth-last-child(-n + 2) {
    padding: 30px 0 4px;
    border-bottom: 0;
  }

  .outcome-item + .outcome-item {
    padding-left: clamp(26px, 2.6vw, 40px);
    border-left: 1px solid rgba(33, 23, 58, .072);
  }

  .outcome-item small {
    margin-top: auto;
  }
}

/* Fit / who it is for */

.service-fit-section {
  background: #fff;
}

.fit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3.4vw, 40px);
}

.fit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--about-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(48, 18, 104, .05);
  list-style: none;
  overflow: hidden;
}

.fit-list li {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: start;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  border-bottom: 1px solid rgba(33, 23, 58, .072);
}

.fit-list li:nth-child(2n) {
  border-left: 1px solid rgba(33, 23, 58, .072);
}

.fit-list li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.fit-list li > svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 10px;
  color: var(--brand-text);
  background: rgba(249, 200, 9, .152);
  box-shadow: inset 0 0 0 1px rgba(249, 200, 9, .308);
}

.fit-list li strong {
  display: block;
  margin-bottom: 7px;
  color: #141414;
  font-size: 15.5px;
  line-height: 1.34;
  letter-spacing: -.015em;
}

.fit-list li span {
  display: block;
  color: var(--about-copy);
  font-size: 13px;
  line-height: 1.66;
}

.stack-panel {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(24px, 3.4vw, 46px);
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--about-line);
  border-radius: 22px;
  background: #ffffff;
}

.stack-panel h3 {
  margin: 0 0 8px;
  color: var(--about-ink);
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.24;
  letter-spacing: -.025em;
}

.stack-panel > p:not(.stack-note) {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 0;
  color: var(--about-copy);
  font-size: 13px;
  line-height: 1.66;
}

.stack-panel > h3 {
  grid-column: 1;
  grid-row: 1;
}

.stack-list {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-list li {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(33, 23, 58, .104);
  border-radius: 999px;
  color: #2b2b2b;
  background: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .9);
  font-size: 12px;
  font-weight: 700;
}

.stack-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(33, 23, 58, .096);
  color: #6b6278;
  font-size: 12.5px;
  line-height: 1.64;
}

.stack-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  color: var(--brand-text);
}

/* FAQ */

.service-faq-section {
  padding-bottom: 76px;
  background: #ffffff;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(280px, 400px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 5vw, 68px);
}

.faq-intro h2 {
  margin: 0;
  color: var(--about-ink);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.faq-intro p {
  margin: 20px 0 0;
  color: var(--about-copy);
  font-size: 15px;
  line-height: 1.7;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-item {
  padding: 4px 22px;
  border: 1px solid var(--about-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(48, 18, 104, .05);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
  color: #30263e;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::after {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-bottom: 2px solid var(--brand-deep);
  border-right: 2px solid var(--brand-deep);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .22s ease;
}

.faq-item[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.faq-item summary:focus-visible {
  outline: 3px solid rgba(33, 23, 58, .176);
  outline-offset: 4px;
  border-radius: 12px;
}

.faq-item > div {
  padding: 0 0 22px;
  color: #6b6278;
  font-size: 14px;
  line-height: 1.74;
}

.faq-item > div p {
  margin: 0;
}

/* Related services */

.service-related-section {
  padding-top: 76px;
  padding-bottom: 40px;
  background: #ffffff;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.related-grid .service-card {
  min-height: 0;
}

.related-grid .service-icon {
  margin-bottom: 28px;
}

.related-grid .service-card h3 {
  max-width: none;
}

/* Depth section — the long-form case for how far automation reaches:
   two explainer cards, a capability checklist and a closing statement. */

.service-depth-section {
  padding-top: 96px;
  padding-bottom: 96px;
  background: #fff;
}

.depth-lead {
  max-width: none;
  margin: 0 0 38px;
  color: var(--about-copy);
  font-size: 17px;
  line-height: 1.78;
}

.depth-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 38px;
}

.depth-note {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--about-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(48, 18, 104, .06);
}

.depth-note-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 24px;
  border: 1px solid rgba(33, 23, 58, .112);
  border-radius: 15px;
  color: var(--brand-text);
  background: rgba(249, 200, 9, .142);
}

.depth-note:nth-child(2) .depth-note-icon {
  color: #765a00;
  border-color: rgba(249, 200, 9, .3);
  background: rgba(249, 200, 9, .14);
}

.depth-note-icon svg {
  width: 22px;
  height: 22px;
}

.depth-note h3 {
  margin: 0 0 14px;
  color: #2f2540;
  font-size: 20px;
  line-height: 1.26;
  letter-spacing: -.02em;
}

.depth-note p {
  margin: 0 0 14px;
  color: #6b6278;
  font-size: 14px;
  line-height: 1.75;
}

.depth-note p:last-child {
  margin-bottom: 0;
}

.depth-panel {
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--about-line);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(48, 18, 104, .06);
}

.depth-panel h3 {
  margin: 0 0 10px;
  color: var(--about-ink);
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.24;
  letter-spacing: -.03em;
}

.depth-panel > p {
  max-width: none;
  margin: 0 0 26px;
  color: var(--about-copy);
  font-size: 14px;
  line-height: 1.72;
}

.depth-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.depth-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid rgba(33, 23, 58, .08);
  border-radius: 14px;
  color: #2b2b2b;
  background: #fff;
  box-shadow: 0 6px 20px rgba(48, 18, 104, .04);
  font-size: 13.5px;
  line-height: 1.62;
}

/* Inline tick so 24 rows stay light in the markup. */

.depth-list li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 7px;
  background: rgba(249, 200, 9, .171) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e17eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(249, 200, 9, .352);
}

.depth-outro {
  max-width: none;
  margin: 40px 0 0;
}

.depth-outro p {
  margin: 0 0 16px;
  color: var(--about-copy);
  font-size: 15px;
  line-height: 1.78;
}

.depth-outro p:last-child {
  margin-bottom: 0;
}

.depth-statement {
  display: block;
  margin-top: 34px;
  padding: clamp(26px, 3.4vw, 38px);
  border-radius: 26px;
  background: var(--brand-on);
  box-shadow: 0 26px 64px rgba(20, 14, 40, .22);
}

.depth-statement p {
  margin: 0;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  line-height: 1.75;
}

.depth-statement .depth-statement-line {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.44;
  letter-spacing: -.02em;
}

/* Responsive */

@media (max-width: 1080px) {

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

  .stack-panel {
    position: static;
  }
}

@media (max-width: 700px) {
  .fit-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .fit-list li:nth-child(2n) {
    border-left: 0;
  }

  .fit-list li:nth-last-child(-n + 2) {
    border-bottom: 1px solid rgba(33, 23, 58, .072);
  }

  .fit-list li:last-child {
    border-bottom: 0;
  }

  .stack-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .stack-panel > h3,
  .stack-panel > p:not(.stack-note),
  .stack-list {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  .capability-grid {
    grid-template-columns: 1fr;
  }

  .service-ghost-link,
  .service-hero-actions .about-cta-link {
    width: 100%;
  }

  .capability-card,
  .stack-panel,
  .depth-note {
    padding: 22px;
    border-radius: 20px;
  }

  .faq-item {
    padding: 2px 18px;
  }

  .faq-item summary {
    font-size: 15px;
  }
}