/* V121 self-contained: includes V120 compact base and V121 refinements. */
/* GERCEK V120: Original photographic services layout, with restrained typography
   and shorter, slimmer service cards. Applies ONLY to hizmetler.php.
   Retains the existing category system, CMS catalog, links and mobile artwork. */
@media (min-width: 861px) {
  #services.v138-services .v116-section { padding: 18px 0 28px; }
  #services.v138-services .v116-layout { grid-template-columns: 236px minmax(0,1fr); gap: 16px; }

  /* Category navigation: the same style with smaller, quieter tiles. */
  #services.v138-services .v116-sidebar { padding: 25px 13px; border-radius: 18px; }
  #services.v138-services .v116-sidebar-label { font-size: 9px; margin: 0 9px 15px; letter-spacing: .15em; }
  #services.v138-services .v116-tabs { gap: 7px; }
  #services.v138-services .v116-tab { min-height: 63px; padding: 9px 10px; gap: 8px; grid-template-columns: 27px minmax(0,1fr) 7px; border-radius: 11px; font-size: 11.65px; line-height: 1.32; font-weight: 720; box-shadow: 0 2px 7px rgba(13,72,116,.02); }
  #services.v138-services .v116-tab.is-active { box-shadow: 0 5px 13px rgba(0,118,188,.13); }
  #services.v138-services .v116-tab-icon { width: 27px; height: 27px; }
  #services.v138-services .v116-tab-icon svg { width: 23px; height: 23px; stroke-width: 2.1; }
  #services.v138-services .v116-tab::after { width: 6px; height: 6px; }

  /* Original datacenter image and diagonal edge deliberately remain. */
  #services.v138-services .v116-category { min-height: 674px; border-radius: 17px; box-shadow: 0 7px 25px rgba(0,84,148,.043); }
  #services.v138-services .v116-banner { min-height: 274px; }
  #services.v138-services .v116-banner-copy { width: 75%; padding: 33px 24px 7px 34px; }
  #services.v138-services .v116-eyebrow { font-size: 9px; letter-spacing: .13em; gap: 11px; }
  #services.v138-services .v116-banner h1 { font-size: clamp(35px, 3vw, 43px); max-width: 550px; margin-top: 18px; line-height: 1.11; letter-spacing: -.042em; font-weight: 820; }
  #services.v138-services .v116-title-accent { width: 48px; height: 4px; margin-top: 14px; }
  #services.v138-services .v116-banner p { margin-top: 13px; font-size: 12.7px; line-height: 1.68; max-width: 565px; }

  /* Two columns stay. Their combined width is capped so the photograph
     gets breathing space along the right edge. */
  #services.v138-services .v116-scope { padding: 9px 32px 30px 34px; }
  #services.v138-services .v116-scope-label { margin-bottom: 12px; font-size: 9px; letter-spacing: .14em; }
  #services.v138-services .v116-service-grid { width: min(100%, 820px); max-width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 12px; row-gap: 8px; }
  #services.v138-services .v116-service { min-height: 50px; padding: 6px 9px; gap: 9px; border-radius: 10px; background: rgba(255,255,255,.955); box-shadow: 0 3px 10px rgba(12,81,139,.046); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  #services.v138-services .v116-service-icon { width: 34px; height: 34px; flex: 0 0 34px; background: #eaf6fe; }
  #services.v138-services .v116-service-icon svg { width: 21px; height: 21px; stroke-width: 2.15; }
  #services.v138-services .v116-service-title { font-size: 11.7px; line-height: 1.32; font-weight: 710; letter-spacing: -.007em; }
  #services.v138-services .v116-service::after { width: 6px; height: 6px; flex-basis: 6px; margin-right: 2px; border-width: 1.5px; }
  #services.v138-services .v116-service:hover { box-shadow: 0 5px 14px rgba(0,96,153,.10); transform: translateY(-1px); }

  #services.v138-services .v116-actions { margin-top: 20px; gap: 20px; }
  #services.v138-services .v116-primary-action { min-width: 220px; min-height: 48px; padding: 11px 24px; border-radius: 9px; box-shadow: 0 7px 16px rgba(3,117,189,.13); font-size: 13.3px; }
  #services.v138-services .v118-desktop-info { gap: 7px; font-size: 11.4px; }
  #services.v138-services .v118-info-circle { width: 20px; height: 20px; font-size: 12px; }
}
/* Shorter usable line lengths on intermediate desktop widths. */
@media (min-width: 861px) and (max-width: 1160px) {
  #services.v138-services .v116-layout { grid-template-columns: 205px minmax(0,1fr); gap: 12px; }
  #services.v138-services .v116-sidebar { padding: 20px 10px; }
  #services.v138-services .v116-tab { min-height: 60px; font-size: 10.8px; padding: 8px; gap: 6px; grid-template-columns: 24px minmax(0,1fr) 6px; }
  #services.v138-services .v116-tab-icon { width: 24px; height: 24px; }
  #services.v138-services .v116-tab-icon svg { width: 22px; height: 22px; }
  #services.v138-services .v116-banner { min-height: 265px; }
  #services.v138-services .v116-banner-copy { width: 78%; padding: 32px 17px 6px 27px; }
  #services.v138-services .v116-banner h1 { font-size: clamp(30px, 3.5vw, 39px); }
  #services.v138-services .v116-banner p { font-size: 12px; max-width: 68%; }
  #services.v138-services .v116-scope { padding: 8px 21px 25px 27px; }
  #services.v138-services .v116-service-grid { width: min(100%, 820px); column-gap: 10px; }
  #services.v138-services .v116-service { gap: 7px; min-height: 49px; padding: 6px 7px; }
  #services.v138-services .v116-service-icon { width: 30px; height: 30px; flex-basis: 30px; }
  #services.v138-services .v116-service-icon svg { width: 19px; height: 19px; }
  #services.v138-services .v116-service-title { font-size: 10.6px; }
  #services.v138-services .v116-primary-action { min-width: 191px; }
  #services.v138-services .v118-desktop-info { font-size: 10.6px; }
}
/* On phones and tablets, keep the original category/photo arrangement.
   Only soften oversized text and tighten tile height slightly. */
@media (max-width: 860px) {
  #services.v138-services .v116-banner h1 { font-size: clamp(25px, 5.5vw, 32px); }
  #services.v138-services .v116-service { min-height: 45px; }
  #services.v138-services .v116-service-title { font-size: 11.4px; }
}


/* V138: compact layout + left-to-right blue sweep. Only background fades. */
#services.v138-services .v116-tab,
#services.v138-services .v116-tab.is-active,
#services.v138-services .v116-tab:hover,
#services.v138-services .v116-tab:focus-visible {
  background: #fff !important;
  color: #123756 !important;
  box-shadow: none !important;
  border: 1px solid #d5e8f6;
}
#services.v138-services .v116-tab.is-active {
  border-color: #2996dd !important;
  box-shadow: inset 3px 0 0 #1397e4 !important;
}
#services.v138-services .v116-tab:hover { border-color: #58ace4; }
#services.v138-services .v116-tab-icon,
#services.v138-services .v116-tab.is-active .v116-tab-icon {
  width: 32px !important; height: 32px !important; flex-basis: 32px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
#services.v138-services .v116-tab-icon img.gb137-icon {
  width: 32px !important; height: 32px !important;
  background: transparent !important; border-radius: 0 !important;
}
#services.v138-services .v116-service-grid > .v116-service {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 52px; padding: 7px 9px; gap: 10px;
  background: #fff; border: 1px solid #d1e6f5;
  border-radius: 10px; color: #0b3055;
  box-shadow: 0 3px 9px rgba(9,69,117,.035);
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
  transform: none !important;
}
#services.v138-services .v116-service::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg,rgba(38,151,237,.24),rgba(51,167,243,.17) 70%,rgba(51,167,243,.10));
  clip-path: inset(0 100% 0 0);
  transition: clip-path .4s cubic-bezier(.2,.7,.2,1);
}
#services.v138-services .v116-service:hover::before,
#services.v138-services .v116-service:focus-visible::before { clip-path: inset(0 0 0 0); }
#services.v138-services .v116-service:hover,
#services.v138-services .v116-service:focus-visible {
  border-color: #75b7e5; color: #082b4e;
  box-shadow: 0 4px 12px rgba(8,88,150,.065);
}
#services.v138-services .v116-service-icon {
  width: 36px !important; height: 36px !important; flex: 0 0 36px !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
  background: transparent !important; border-radius: 0 !important;
}
#services.v138-services .v116-service-icon img.gb137-icon {
  width: 34px !important; height: 34px !important;
  max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important; filter: none !important; transform: none !important;
}
#services.v138-services .v116-service-title {
  min-width: 0; flex: 1 1 auto; color: #0b3055;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
  overflow: visible; text-overflow: clip; opacity: 1;
  -webkit-line-clamp: unset;
}
#services.v138-services .v116-service::after {
  content: ""; display: block; position: relative; flex: 0 0 6px;
  width: 6px; height: 6px; margin-left: auto; margin-right: 3px;
  border: 0; border-right: 1.4px solid #1483cc; border-top: 1.4px solid #1483cc;
  transform: rotate(45deg); filter: none; opacity: .9;
}
#services.v138-services .v116-primary-action::before,
#services.v138-services .v116-primary-action::after {content: none !important; display: none !important;}
#services.v138-services .v118-desktop-info {display: none !important;}
@media(min-width:861px) {
  #services.v138-services .v116-tab {grid-template-columns: 32px minmax(0,1fr) 7px;}
  #services.v138-services .v116-service-grid {width: min(100%,820px); gap: 8px 12px;}
  /* Edge rules fade together with the surface, avoiding the old white vertical line. */
  #services.v138-services .v116-service-grid > .v116-service:nth-child(even) {
    border-color: transparent !important;
    border-left-color: #d1e6f5 !important;
    background:
      linear-gradient(90deg,#d1e6f5,rgba(209,230,245,.7) 65%,transparent 93%) left top / 100% 1px no-repeat,
      linear-gradient(90deg,#d1e6f5,rgba(209,230,245,.7) 65%,transparent 93%) left bottom / 100% 1px no-repeat,
      linear-gradient(90deg,#fff 0%,rgba(255,255,255,.99) 64%,rgba(248,253,255,.96) 77%,rgba(234,248,255,.74) 89%,rgba(209,236,253,.27) 97%,rgba(209,236,253,0) 100%);
    background-origin: border-box; background-clip: border-box;
    box-shadow: none !important;
  }
  #services.v138-services .v116-service-grid > .v116-service:nth-child(even)::before {
    background: linear-gradient(90deg,rgba(38,151,237,.28),rgba(51,167,243,.22) 66%,rgba(51,167,243,.12) 85%,rgba(51,167,243,0) 100%);
  }
  #services.v138-services .v116-service-grid > .v116-service:nth-child(even):hover,
  #services.v138-services .v116-service-grid > .v116-service:nth-child(even):focus-visible {
    border-left-color: #75b7e5 !important;
  }
  #services.v138-services .v116-service-grid > .v116-service:nth-child(even) .v116-service-title {
    color: #082d51; opacity: 1;
    text-shadow: 0 0 2px #fff, 0 0 5px rgba(255,255,255,.8);
  }
}
@media(min-width:861px) and (max-width:1160px) {
  #services.v138-services .v116-tab {grid-template-columns:28px minmax(0,1fr) 6px;}
  #services.v138-services .v116-tab-icon,#services.v138-services .v116-tab-icon img.gb137-icon {width:28px !important;height:28px !important;}
  #services.v138-services .v116-service-grid > .v116-service {padding:6px 7px;gap:7px;}
  #services.v138-services .v116-service-title {font-size:11.3px;}
  #services.v138-services .v116-service-icon {width:32px !important;height:32px !important;flex-basis:32px !important;}
  #services.v138-services .v116-service-icon img.gb137-icon {width:31px !important;height:31px !important;}
}
@media(max-width:860px) {
  #services.v138-services .v116-service-grid > .v116-service {min-height:48px;padding:7px 9px;gap:8px;}
  #services.v138-services .v116-service-title {font-size:11.8px;}
  #services.v138-services .v116-service-icon {width:32px !important;height:32px !important;flex-basis:32px !important;}
  #services.v138-services .v116-service-icon img.gb137-icon {width:31px !important;height:31px !important;}
  #services.v138-services .v116-tab {min-height:101px;}
  #services.v138-services .v116-tab-icon {flex-basis:32px !important;}
}
@media(max-width:360px) {
  #services.v138-services .v116-service-title {font-size:11.3px;}
  #services.v138-services .v116-tab {font-size:9px;}
}
@media(prefers-reduced-motion:reduce) {
  #services.v138-services .v116-service,#services.v138-services .v116-service::before {transition:none !important;}
}