/* ==========================================================
   x99 10kasim - hero extension (.myvide), same idea as x99-gta6-myvide.css:
   the homepage hero gets the theme's palette + scenery, the header is
   transparent at the top and turns into the themed header on scroll.
   Load after x99-10kasim.css (and after 08-homepage.css / 88-tmp.css).
   ========================================================== */
:root { --x99-hdr-h: 88px; }   /* keep equal to the header height */

body.homepage #contentskip .myvide {
  --ataturk-silhouette: url("/static/images/ataturk-silhouette-white.png");
  isolation: isolate;
  background: radial-gradient(ellipse 22% 90% at 60% 60%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(18, 18, 18, 1) 40%, rgba(28, 28, 28, 1) 60%, rgba(10, 10, 10, 1) 80%, rgba(0, 0, 0, 1) 100%) !important;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35) 30%, rgba(227,10,23,.8) 50%, rgba(255,255,255,.35) 70%, rgba(255,255,255,0)) 1 / 1 / 0 stretch;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .5);
}

/* Atatürk silhouette on the left, soft so the white headline on top stays readable */
body.homepage #contentskip .myvide::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto; height: auto;
  border: 0; border-radius: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--ataturk-silhouette) 2% bottom / auto 90% no-repeat;
  opacity: .26;
}
/* the old faint ring/dots of the default hero are not used here */
body.homepage #contentskip .myvide::after { display: none; }


/* Keep the image panel in front of the scenery */
body.homepage #contentskip .myvide > div:first-child { z-index: 1 !important; }

/* Headline + buttons readable on the themed background */
body.homepage #contentskip .myvide .videtext h2 {
  background: linear-gradient(90deg, #fff 0%, #e8e8e8 55%, #ff5a64 100%) 0 0 / cover text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(0,0,0, .55));
}
body.homepage #contentskip .myvide .videtext p { color: #fff; }
body.homepage #contentskip .myvide .videtext a.btn + a.btn {
  background: rgba(255,255,255,.94) !important;
  border-color: transparent !important;
  color: #111 !important;
}

/* phones: smaller and fainter */
@media (max-width: 768px) {
  body.homepage #contentskip .myvide::before { opacity: .2; background-size: auto 62%; }
}

/* ==========================================================
   Header: transparent at the very top (hero design shows
   through); the themed header appears once the page scrolls
   (body.hero-scrolled is toggled by the existing page script)
   ========================================================== */
body.homepage:not(.hero-scrolled) header,
body.homepage:not(.hero-scrolled) header.mobile {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border-image: none !important;
  border-bottom-color: transparent !important;
}
body.homepage:not(.hero-scrolled) header::after { opacity: 0 !important; }
header::after { transition: opacity .35s ease; }
header { transition: box-shadow .35s ease; }

/* Pull the hero up underneath the sticky header */
body.homepage #contentskip .myvide {
  margin-top: calc(-1 * var(--x99-hdr-h));
  padding-top: calc(clamp(20px, 3vw, 48px) + var(--x99-hdr-h));
  min-height: calc(clamp(480px, -120px + 100svh, 700px) + var(--x99-hdr-h));
}
@media (min-width: 901px) {
  body.homepage #contentskip .myvide > div:first-child {
    top: calc(clamp(24px, 3vw, 48px) + var(--x99-hdr-h)) !important;
  }
}