/* GERCEK BILGISAYAR - V87 / Image masks are UI layers, never embedded in photos.
   All selectors are scoped to photographs. SVG icons, brand logos, and partner logos are excluded.
   For future custom media containers, add class="v87-mask-media" and optionally
   data-v87-mask="left" | "bottom" | "soft"; see KURULUM-V87.txt. */

:root {
  --v87-light: 250,253,255;
  --v87-text-panel: 255,255,255;
}

/* 1. Homepage hero slider. Existing .hero-glow is the DIV overlay; the image
   remains a normal img and new CMS photos inherit the same legibility. */
body.cms-theme .hero-slider-v19 .hero-slide .hero-backdrop > img.hero-static-bg {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body.cms-theme .hero-slider-v19 .hero-slide .hero-glow {
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(var(--v87-light),.99) 0%,
      rgba(var(--v87-light),.96) 22%,
      rgba(var(--v87-light),.90) 34%,
      rgba(var(--v87-light),.73) 46%,
      rgba(var(--v87-light),.30) 59%,
      rgba(var(--v87-light),.04) 78%),
    linear-gradient(0deg,rgba(4,34,61,.08),transparent 33%) !important;
}
body.cms-theme .hero-slider-v19 .hero-slide .hero-content {position: relative;z-index: 2 !important;}

/* 2. Homepage: 9 photo cards from V82..V86.
   In particular this handles raw photos uploaded to home-v82/ later.
   Photos themselves never receive a white gradient or opacity mask. */
body.cms-theme #services-showcase.v82-showcase .v82-photo-card {
  position: relative;
  isolation: isolate;
}
body.cms-theme #services-showcase.v82-showcase .v82-photo-card > img.v82-photo {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  z-index: -1 !important;
}
body.cms-theme #services-showcase.v82-showcase .v82-photo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg,
      rgba(var(--v87-text-panel),1) 0%,
      rgba(var(--v87-text-panel),.98) 27%,
      rgba(var(--v87-text-panel),.94) 42%,
      rgba(var(--v87-text-panel),.82) 54%,
      rgba(var(--v87-text-panel),.35) 70%,
      rgba(var(--v87-text-panel),0) 88%);
}
body.cms-theme #services-showcase.v82-showcase .v82-photo-card > .v82-card-content {
  position: relative;
  z-index: 1 !important;
}

/* 3. "Hizmetlerimiz": category images rendered by v43_category_panel().
   Text is on an independent sibling and remains above the photo. */
body.cms-theme .v43-category-panel .v43-panel-image > img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
}
body.cms-theme .v43-category-panel .v43-panel-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,rgba(244,251,255,.62) 0%,rgba(244,251,255,.16) 25%,transparent 60%),
    linear-gradient(0deg,rgba(8,36,57,.36),transparent 28%) !important;
}
body.cms-theme .v43-category-panel .v43-image-signature {position: absolute;z-index: 2;}

/* 4. Service detail visual - mask on figure, not on media asset. */
body.cms-theme .v66-detail .v66-intro-visual {
  position: relative;
  isolation: isolate;
}
body.cms-theme .v66-detail .v66-intro-visual > img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
}
body.cms-theme .v66-detail .v66-intro-visual::after {
  content: '';
  position: absolute;
  inset: 0 !important;
  width: auto;
  height: auto !important;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(0deg,rgba(232,246,255,.24),transparent 42%),
    linear-gradient(90deg,rgba(243,250,255,.13),transparent 38%) !important;
}

/* 5. Homepage managed-IT photo. Copy is outside the image wrapper. */
body.cms-theme .managed-card .managed-media {
  position: relative;
  isolation: isolate;
}
body.cms-theme .managed-card .managed-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg,transparent 38%,rgba(225,243,253,.26) 100%);
}
body.cms-theme .managed-card .managed-media > img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* 6. Success-story slideshow with white captions: dark overlay stays on div. */
body.cms-theme .story-visual-v19 .story-image-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(4,24,43,.04) 30%,rgba(4,25,48,.66) 100%);
}
body.cms-theme .story-visual-v19 > img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body.cms-theme .story-visual-v19 :is(.story-image-caption,.story-switch) {
  position: absolute;
  z-index: 2;
}

/* 7. Case-study list photos (no overlay on customer logos). */
body.cms-theme .v32-case-image {position: relative;isolation:isolate;}
body.cms-theme .v32-case-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,transparent 68%,rgba(227,244,253,.18) 100%);
}

/* 8. Admin-configurable extra content blocks with image, all pages. */
body.cms-theme .v34-extra-inner .v87-extra-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  background: #eaf6fd;
}
body.cms-theme .v34-extra-inner .v87-extra-media > img {
  display: block;
  width: 100%;
  max-height: 290px;
  object-fit: cover;
  border-radius: inherit;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body.cms-theme .v34-extra-inner .v87-extra-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(247,252,255,.20),transparent 58%);
}

/* Reusable helper for new admin image areas. Never apply to logos/icons. */
.v87-mask-media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.v87-mask-media > :is(img,picture) {display:block;width:100%;height:100%;object-fit:cover;}
.v87-mask-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events:none;
  background: linear-gradient(90deg,rgba(251,254,255,.96),rgba(251,254,255,.12) 72%,transparent);
}
.v87-mask-media[data-v87-mask="bottom"]::after {
  background:linear-gradient(0deg,rgba(6,27,49,.7),rgba(6,27,49,.06) 66%,transparent);
}
.v87-mask-media[data-v87-mask="soft"]::after {
  background:linear-gradient(0deg,rgba(242,249,253,.22),transparent 65%);
}
.v87-mask-media > .v87-mask-content {position:relative;z-index:2;}

@media (max-width: 900px) {
  body.cms-theme .hero-slider-v19 .hero-slide .hero-glow {
    background:
      linear-gradient(180deg,
        rgba(241,250,255,.80) 0%,
        rgba(241,250,255,.84) 38%,
        rgba(241,250,255,.95) 65%,
        rgba(241,250,255,.995) 100%),
      linear-gradient(90deg,rgba(239,248,253,.27),transparent) !important;
  }
  body.cms-theme .v43-category-panel .v43-panel-image::after {
    background:
      linear-gradient(180deg,rgba(239,249,255,.03),rgba(239,249,255,.16) 100%) !important;
  }
}
@media (max-width: 700px) {
  body.cms-theme #services-showcase.v82-showcase .v82-photo-card::before {
    background:linear-gradient(90deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.98) 34%,
      rgba(255,255,255,.92) 49%,
      rgba(255,255,255,.63) 64%,
      rgba(255,255,255,.10) 85%,
      rgba(255,255,255,0) 100%);
  }
  body.cms-theme .v34-extra-inner .v87-extra-media {width:100%;}
}
@media (prefers-reduced-motion: reduce) {
  body.cms-theme .v43-category-panel .v43-panel-image img {transition:none!important;}
}