/* Flymedswiss: Istanbul skyline hero | 2026-11-11
   Full-bleed background, no baked-in text; accessible responsive overlays. */
.hero.istanbul-hero {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: min(820px, 92svh);
  padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(4.5rem, 8vw, 7rem);
  background-color: #102136;
  background-image:
    linear-gradient(90deg, rgba(7, 18, 34, .93) 0%, rgba(7, 18, 34, .87) 24%, rgba(9, 21, 34, .62) 51%, rgba(10, 23, 36, .14) 82%),
    linear-gradient(0deg, rgba(6, 16, 31, .55), rgba(9, 22, 37, .10) 56%),
    url('/assets/images/hero-istanbul-skyline.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero.istanbul-hero::before { display: none; }
.hero.istanbul-hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  z-index: 1;
  pointer-events: none;
}
.hero.istanbul-hero .hero-grid {
  display: block;
  position: relative;
  z-index: 2;
}
.hero.istanbul-hero .hero-copy { max-width: min(52rem, 66%); }
.hero.istanbul-hero .hero-copy .eyebrow {
  color: #f4f7fb;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: .6rem;
  margin-bottom: 1.2rem;
  padding: .54rem .82rem;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(13,26,43,.45);
  border-radius: 100px;
  backdrop-filter: blur(5px);
  font-size: .69rem;
  letter-spacing: .11em;
  line-height: 1.55;
}
.hero.istanbul-hero .hero-copy .eyebrow::before {
  content: '';
  width: .42rem;
  height: .42rem;
  flex: 0 0 .42rem;
  background: #e84b5c;
  border-radius: 50%;
}
.hero.istanbul-hero .hero-copy h1 {
  max-width: 18ch;
  color: #ffffff;
  font-size: clamp(3.25rem, 5vw, 5.35rem);
  font-weight: 730;
  letter-spacing: -.036em;
  line-height: 1.075;
  text-wrap: balance;
  text-shadow: 0 4px 18px rgba(0,0,0,.14);
}
.hero.istanbul-hero .hero-copy h1 .red {
  color: #ff9fa5;
}
.hero.istanbul-hero .hero-copy .lead {
  max-width: 42rem;
  margin-top: 1.25rem;
  color: rgba(255,255,255,.93);
  font-size: clamp(1.02rem,1.55vw,1.17rem);
  line-height: 1.65;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.hero.istanbul-hero .hero-price {
  width: fit-content;
  max-width: min(100%, 43rem);
  margin-top: 1.6rem;
  padding: 1rem 1.1rem;
  color: #fff;
  background: rgba(8,18,32,.64);
  border: 1px solid rgba(255,255,255,.26);
  border-left: 3px solid #ff8b96;
  border-radius: .8rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  backdrop-filter: blur(9px);
}
.hero.istanbul-hero .hero-price-number>span,
.hero.istanbul-hero .hero-price-description>span {color: rgba(255,255,255,.75);}
.hero.istanbul-hero .hero-price-number strong {color: #fff;letter-spacing:-.04em;}
.hero.istanbul-hero .hero-price-number sup {color:#ff99a2;}
.hero.istanbul-hero .hero-price-description {border-color:rgba(255,255,255,.23);}
.hero.istanbul-hero .hero-price-description>a {color:#ffacb3;}
.hero.istanbul-hero .hero-price-description>a:hover {color:#fff;}
.hero.istanbul-hero .hero-price-footnote {
  max-width: 42rem;
  color: rgba(255,255,255,.73);
  font-size: .72rem;
  line-height: 1.58;
}
.hero.istanbul-hero .hero-copy .button-row {margin-top:1.65rem;}
.hero.istanbul-hero .hero-copy .button-primary {
  background: #cf1f33;
  color: #fff;
  border-color: #cf1f33;
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}
.hero.istanbul-hero .hero-copy .button-primary:hover {background:#ad1628;border-color:#ad1628;}
.hero.istanbul-hero .hero-copy .button-outline {
  background: rgba(10,22,38,.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(4px);
}
.hero.istanbul-hero .hero-copy .button-outline:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.hero.istanbul-hero .microproofs {margin-top:1.6rem;}
.hero.istanbul-hero .microproofs li {color:rgba(255,255,255,.89);font-size:.83rem;}
.hero.istanbul-hero .microproofs li::before {background:#ff9ca7;}
.hero.istanbul-hero .hero-location {
  position: absolute;
  right: max(1.5rem, calc((100vw - 1200px)/2));
  bottom: 1.8rem;
  z-index: 2;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  font-size:.67rem;
  letter-spacing:.19em;
  font-weight:750;
  text-transform:uppercase;
}
@media (min-width: 1500px) {
  .hero.istanbul-hero {background-position:center 48%;}
}
@media (max-width: 1050px) {
  .hero.istanbul-hero {min-height:720px; background-position:57% center;}
  .hero.istanbul-hero .hero-copy {max-width: min(44rem, 78%);}
  .hero.istanbul-hero .hero-copy h1 {font-size:clamp(3rem,5.8vw,4.3rem);}
}
@media (max-width: 800px) {
  .hero.istanbul-hero {
    min-height:0;
    padding: 4.3rem 0 4.8rem;
    background-position: 60% center;
    background-image:
      linear-gradient(90deg, rgba(7,18,34,.94), rgba(7,18,34,.70) 78%,rgba(7,18,34,.50)),
      linear-gradient(0deg, rgba(7,18,34,.48), rgba(7,18,34,.15)),
      url('/assets/images/hero-istanbul-skyline.webp');
  }
  .hero.istanbul-hero .hero-copy {max-width:100%;}
  .hero.istanbul-hero .hero-copy h1 {max-width: 17ch; font-size:clamp(2.7rem,7.5vw,4.15rem);}
  .hero.istanbul-hero .hero-location {right:1.5rem;bottom:1rem;}
}
@media (max-width: 540px) {
  .hero.istanbul-hero {padding:3.3rem 0 4rem;background-position:61% center;}
  .hero.istanbul-hero .hero-copy h1 {font-size:clamp(2.55rem,10.4vw,3.45rem);line-height:1.09;letter-spacing:-.032em;max-width: 19ch;}
  .hero.istanbul-hero .hero-copy .eyebrow {font-size:.62rem;letter-spacing:.065em;}
  .hero.istanbul-hero .hero-copy .lead {font-size:.98rem;line-height:1.55;margin-top:1rem;}
  .hero.istanbul-hero .hero-price {width:100%;padding:.88rem .95rem;gap:.8rem;margin-top:1.2rem;}
  .hero.istanbul-hero .hero-price-number strong {font-size:2.2rem;}
  .hero.istanbul-hero .hero-price-footnote {font-size:.69rem;}
  .hero.istanbul-hero .hero-copy .button-row {margin-top:1.25rem;}
  .hero.istanbul-hero .microproofs {gap:.5rem 1rem;margin-top:1.15rem;}
  .hero.istanbul-hero .microproofs li {font-size:.76rem;}
  .hero.istanbul-hero .hero-location {font-size:.58rem;right:1rem;bottom:.7rem;}
}