/* Home: "Çizgi değil, bağlantı" comparison and the feature strip, after Dilara's mockups (design/reference). */

/* section: near-black sky turning deep blue to the right and below, a blue glow and a planet rim at the top right */

.teo-website-contrast-section {
  padding: clamp(64px, 6vw, 88px) 0 clamp(56px, 5vw, 76px);
  overflow: hidden;
  isolation: isolate;
}

.teo-website-contrast-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
      radial-gradient(ellipse 200px 80px at 76% 132px, rgba(150, 210, 255, 0.34), rgba(90, 170, 255, 0.12) 55%, rgba(90, 170, 255, 0) 100%),
      radial-gradient(ellipse 22% 26% at 96% 0%, rgba(110, 185, 255, 0.5), rgba(110, 185, 255, 0) 100%),
      radial-gradient(ellipse 50% 66% at 80% 0%, rgba(30, 112, 255, 0.95), rgba(24, 98, 240, 0.45) 45%, rgba(24, 98, 240, 0) 75%),
      radial-gradient(ellipse 58% 95% at 100% 46%, rgba(8, 64, 196, 0.42), rgba(8, 64, 196, 0) 72%),
      radial-gradient(ellipse 72% 30% at 50% 108%, rgba(18, 88, 222, 0.5), rgba(18, 88, 222, 0) 72%),
      radial-gradient(ellipse 30% 22% at 6% 102%, rgba(28, 104, 238, 0.55), rgba(28, 104, 238, 0) 70%),
      radial-gradient(ellipse 32% 24% at 96% 98%, rgba(28, 104, 238, 0.6), rgba(28, 104, 238, 0) 70%),
      linear-gradient(112deg, #01030b 0%, #020820 42%, #021a4a 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0, #000 40px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0, #000 40px, #000 calc(100% - 48px), transparent 100%);
}

/* the lower rim of a planet seen from below and to the left: a thin lit crescent on a tilted ellipse (fitted to the rim in
   the mockup), long and faint to the left, brightest low on the right, climbing steeply out of the section on the right */
.teo-website-contrast-section::after {
  --teo-contrast-planet: clamp(520px, 66.7vw, 1240px);
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: var(--teo-contrast-planet);
  height: calc(var(--teo-contrast-planet) * 0.73);
  left: calc(63% - var(--teo-contrast-planet) / 2);
  top: calc(var(--teo-contrast-planet) * -0.61);
  border-radius: 50%;
  border-right: 3px solid #f4fcff;
  border-bottom: 3px solid #f4fcff;
  transform: rotate(20deg);
  filter: drop-shadow(0 0 2px rgba(235, 251, 255, 0.95)) drop-shadow(0 0 8px rgba(150, 215, 255, 0.95)) drop-shadow(0 4px 26px rgba(70, 165, 255, 0.85))
      drop-shadow(0 10px 60px rgba(40, 130, 255, 0.6));
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.75) 73%, #000 84%);
  mask-image: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.75) 73%, #000 84%);
}

/* the comparison spreads wider than the text sections, as the product tour after it does */
.teo-website-contrast-section .teo-website-shell {
  max-width: 1400px;
}

.teo-website-contrast-section .teo-website-heading {
  margin-bottom: clamp(26px, 2.4vw, 34px);
}

.teo-website-contrast-section .teo-website-title {
  font-size: clamp(36px, 5.3vw, 76px);
}

.teo-website-contrast-section .teo-website-lead {
  max-width: 35em;
  color: #d3ddee;
}

/* the two panels share their rows, so a classic row and its Şimşek answer stay on one line */

.teo-website-contrast-panels {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  grid-template-rows: auto repeat(5, auto);
  column-gap: 6px;
  position: relative;
}

.teo-website-contrast-panel {
  grid-row: 1 / span 6;
  display: grid;
  grid-template-rows: subgrid;
  position: relative;
  z-index: 0;
  min-width: 0;
}

.teo-website-contrast-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid;
}

.teo-website-contrast-panel .teo-website-contrast-panel-title {
  grid-row: 1;
  margin: 0;
  padding: 24px 24px 20px 46px;
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.teo-website-contrast-list {
  grid-row: 2 / span 5;
  display: grid;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0 14px 6px;
  list-style: none;
}

.teo-website-contrast-item {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 36px);
  min-height: 65px;
  padding: 12px 14px 12px 32px;
  border-top: 1px solid;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.45;
  transition: background-color 0.25s ease;
}

.teo-website-contrast-item i {
  flex: none;
  font-size: 30px;
  line-height: 1;
}

/* classic GIS: dark glass, a faint edge turning blue to the right, its top right corner given to the connector */

.teo-website-contrast-panel-classic::before {
  border-radius: 22px 0 22px 22px;
  border-color: rgba(64, 98, 160, 0.42) transparent rgba(52, 128, 220, 0.55) rgba(58, 92, 152, 0.4);
  background: linear-gradient(180deg, rgba(4, 13, 30, 0.86), rgba(3, 22, 56, 0.82));
  box-shadow: inset 0 1px 0 rgba(150, 185, 240, 0.06), 18px 22px 40px -30px rgba(120, 190, 255, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 26'%3E%3Cpath d='M0 0H2C22 .5 30 21.5 49 21.5C60 21.5 78.2 12.1 82.8 5.5V26H0Z'/%3E%3C/svg%3E");
  -webkit-mask-size: calc(100% - 72px) 100%, 100% calc(100% - 26px), 72px 26px;
  -webkit-mask-position: left top, left bottom, right top;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 26'%3E%3Cpath d='M0 0H2C22 .5 30 21.5 49 21.5C60 21.5 78.2 12.1 82.8 5.5V26H0Z'/%3E%3C/svg%3E");
  mask-size: calc(100% - 72px) 100%, 100% calc(100% - 26px), 72px 26px;
  mask-position: left top, left bottom, right top;
  mask-repeat: no-repeat;
}

.teo-website-contrast-panel-classic .teo-website-contrast-panel-title {
  color: #b4c0e6;
}

.teo-website-contrast-panel-classic .teo-website-contrast-item {
  color: #c3cbe0;
  border-top-color: rgba(52, 74, 116, 0.55);
}

.teo-website-contrast-panel-classic .teo-website-contrast-item i {
  color: #99a8c3;
}

/* Şimşek: saturated blue glass with a neon edge, standing a little higher than its neighbour */

.teo-website-contrast-panel-simsek {
  z-index: 1;
}

.teo-website-contrast-panel-simsek::before {
  top: -5px;
  border-radius: 24px;
  border-color: #3f9dfb #8fd6ff #2a86ec #22a6f7;
  background: linear-gradient(180deg, rgba(0, 70, 182, 0.8) 0%, rgba(1, 44, 112, 0.84) 26%, rgba(1, 33, 86, 0.88) 100%);
  box-shadow:
      0 0 0 1px rgba(77, 164, 255, 0.35),
      0 0 22px rgba(42, 120, 255, 0.55),
      0 0 80px rgba(42, 107, 255, 0.28),
      inset 0 0 36px rgba(77, 164, 255, 0.2),
      inset 0 1px 0 rgba(220, 245, 255, 0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* the flare where light catches the top edge */
.teo-website-contrast-panel-simsek::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 22%;
  width: 180px;
  height: 5px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #ffffff 0%, rgba(190, 236, 255, 0.85) 22%, rgba(110, 190, 255, 0.35) 52%, rgba(110, 190, 255, 0) 72%);
  filter: blur(0.6px);
}

.teo-website-contrast-panel-simsek .teo-website-contrast-panel-title {
  color: #ffffff;
  padding-left: 50px;
}

.teo-website-contrast-panel-simsek .teo-website-contrast-item {
  color: #ffffff;
  border-top-color: rgba(34, 98, 186, 0.62);
  padding-left: 38px;
}

.teo-website-contrast-panel-simsek .teo-website-contrast-item i {
  color: #ffffff;
  filter: drop-shadow(0 0 5px rgba(61, 155, 255, 0.95)) drop-shadow(0 0 2px rgba(61, 155, 255, 0.9));
}

/* a classic row and its answer light up together */
.teo-website-contrast-panels:has([data-teo-row="1"]:hover) [data-teo-row="1"],
.teo-website-contrast-panels:has([data-teo-row="2"]:hover) [data-teo-row="2"],
.teo-website-contrast-panels:has([data-teo-row="3"]:hover) [data-teo-row="3"],
.teo-website-contrast-panels:has([data-teo-row="4"]:hover) [data-teo-row="4"],
.teo-website-contrast-panels:has([data-teo-row="5"]:hover) [data-teo-row="5"] {
  background-color: rgba(77, 164, 255, 0.08);
}

/* the curve joining the classic panel's top edge to the Şimşek panel's corner */
.teo-website-contrast-connector {
  position: absolute;
  left: -156px;
  top: -10px;
  width: 200px;
  height: 40px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 2px rgba(175, 237, 255, 0.9)) drop-shadow(0 0 6px rgba(107, 173, 235, 0.95)) drop-shadow(0 0 14px rgba(60, 150, 255, 0.6));
}

.teo-website-contrast-connector path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease 0.45s;
}

.teo-website-contrast-panels.teo-website-visible .teo-website-contrast-connector path {
  stroke-dashoffset: 0;
}

/* five things the connected model does, in a row of columns with fading dividers */

.teo-website-contrast-strip {
  list-style: none;
  margin: clamp(28px, 2.6vw, 38px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.teo-website-contrast-feature {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding: 16px 8px 16px 20px;
  transition-delay: var(--teo-delay, 0s);
}

.teo-website-contrast-feature + .teo-website-contrast-feature::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(25, 74, 123, 0), #1d5490 22%, #1d5490 78%, rgba(25, 74, 123, 0));
}

.teo-website-contrast-feature-icon {
  flex: none;
  display: inline-flex;
  margin-top: -2px;
  font-size: 44px;
  line-height: 1;
  color: #cfe6fb;
  filter: drop-shadow(0 0 6px rgba(77, 164, 255, 0.75));
}

.teo-website-contrast-feature-icon svg {
  display: block;
}

.teo-website-contrast-feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.teo-website-contrast-feature-text strong {
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.teo-website-contrast-feature-text span {
  color: #a9bcd9;
  font-size: 14px;
  line-height: 1.4;
}

/* narrow screens */

@media (max-width: 1080px) {
  .teo-website-contrast-panel .teo-website-contrast-panel-title {
    padding: 22px 18px 18px 28px;
  }

  .teo-website-contrast-panel-simsek .teo-website-contrast-panel-title {
    padding-left: 30px;
  }

  .teo-website-contrast-item, .teo-website-contrast-panel-simsek .teo-website-contrast-item {
    padding: 12px 10px 12px 14px;
  }

  .teo-website-contrast-item i {
    font-size: 22px;
  }

  .teo-website-contrast-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 18px;
  }

  .teo-website-contrast-feature {
    grid-column: span 2;
  }

  .teo-website-contrast-feature:nth-child(n + 4) {
    grid-column: span 3;
  }

  .teo-website-contrast-feature:nth-child(4)::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .teo-website-contrast-panels {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: 14px;
  }

  .teo-website-contrast-panel, .teo-website-contrast-list {
    grid-row: auto;
    display: block;
  }

  .teo-website-contrast-panel-classic::before {
    border-radius: 20px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .teo-website-contrast-panel-simsek::before {
    top: 0;
    border-radius: 20px;
  }

  .teo-website-contrast-panel-simsek::after {
    top: -2px;
    width: 140px;
  }

  .teo-website-contrast-connector {
    display: none;
  }

  .teo-website-contrast-panel-classic .teo-website-contrast-panel-title {
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .teo-website-contrast-panel-classic .teo-website-contrast-item {
    min-height: 50px;
    font-size: 15px;
  }

  .teo-website-contrast-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0;
  }

  .teo-website-contrast-feature, .teo-website-contrast-feature:nth-child(n + 4) {
    grid-column: auto;
    padding: 16px 12px 16px 4px;
    border-top: 1px solid rgba(29, 84, 144, 0.55);
  }

  .teo-website-contrast-feature:last-child {
    grid-column: 1 / -1;
  }

  .teo-website-contrast-feature + .teo-website-contrast-feature::before {
    display: none;
  }

  .teo-website-contrast-section::after {
    --teo-contrast-planet: 88vw;
    left: calc(78% - var(--teo-contrast-planet) / 2);
  }
}

@media (max-width: 600px) {
  .teo-website-contrast-panel .teo-website-contrast-panel-title, .teo-website-contrast-panel-simsek .teo-website-contrast-panel-title {
    padding: 18px 16px 14px 18px;
    font-size: 17px;
  }

  .teo-website-contrast-list {
    padding: 0 8px 4px;
  }

  .teo-website-contrast-item, .teo-website-contrast-panel-simsek .teo-website-contrast-item {
    gap: 14px;
    min-height: 0;
    padding: 13px 8px 13px 10px;
    font-size: 15px;
  }

  .teo-website-contrast-item i {
    font-size: 21px;
  }

  .teo-website-contrast-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .teo-website-contrast-feature-icon {
    width: 40px;
    justify-content: center;
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .teo-website-contrast-connector path {
    stroke-dashoffset: 0;
    transition: none;
  }

  .teo-website-contrast-item {
    transition: none;
  }
}