/* ===== 10 Kasım — Atatürk'ü Anma: black, flag at half-mast, red carnations, portrait, infinity & motto ===== */

/* Put your official Atatürk silhouette here (a PNG/SVG with a transparent background,
   drawn in white or light grey, works best on black). Example:
   --ataturk-silhouette: url("/static/img/ataturk-silhouette.png");               */
header {
  --ataturk-silhouette: url("/static/images/ataturk-silhouette-white.png");
}

header,
body.headerimage header,
body.homepage header {
  isolation: isolate;
  background:
    /* soft light behind the silhouette */
    radial-gradient(ellipse 22% 130% at 60% 60%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(100deg,
      rgba(0, 0, 0, .95)     0%,
      rgba(18, 18, 18, .92)  40%,
      rgba(28, 28, 28, .90)  60%,
      rgba(10, 10, 10, .93)  80%,
      rgba(0, 0, 0, .95)     100%);
  backdrop-filter: blur(12px) grayscale(80%);
  -webkit-backdrop-filter: blur(12px) grayscale(80%);
  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;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .5);
}

header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--ataturk-silhouette) 62% 50% / auto 100% no-repeat,   /* Atatürk portrait (white PNG) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M134.0 26.0L133.8 28.4L133.0 30.6L131.9 32.6L130.4 34.4L128.6 35.8L126.7 36.8L124.6 37.5L122.5 37.9L120.4 38.0L118.4 37.8L116.5 37.5L114.7 36.9L112.9 36.2L111.3 35.3L109.7 34.4L108.2 33.4L106.8 32.4L105.5 31.2L104.2 30.1L103.0 29.0L101.8 27.8L100.6 26.6L99.4 25.4L98.2 24.2L97.0 23.0L95.8 21.9L94.5 20.8L93.2 19.6L91.8 18.6L90.3 17.6L88.7 16.7L87.1 15.8L85.3 15.1L83.5 14.5L81.6 14.2L79.6 14.0L77.5 14.1L75.4 14.5L73.3 15.2L71.4 16.2L69.6 17.6L68.1 19.4L67.0 21.4L66.2 23.6L66.0 26.0L66.2 28.4L67.0 30.6L68.1 32.6L69.6 34.4L71.4 35.8L73.3 36.8L75.4 37.5L77.5 37.9L79.6 38.0L81.6 37.8L83.5 37.5L85.3 36.9L87.1 36.2L88.7 35.3L90.3 34.4L91.8 33.4L93.2 32.4L94.5 31.2L95.8 30.1L97.0 29.0L98.2 27.8L99.4 26.6L100.6 25.4L101.8 24.2L103.0 23.0L104.2 21.9L105.5 20.8L106.8 19.6L108.2 18.6L109.7 17.6L111.3 16.7L112.9 15.8L114.7 15.1L116.5 14.5L118.4 14.2L120.4 14.0L122.5 14.1L124.6 14.5L126.7 15.2L128.6 16.2L130.4 17.6L131.9 19.4L133.0 21.4L133.8 23.6L134.0 26.0Z' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linejoin='round'/%3E%3Ctext x='100' y='80' text-anchor='middle' fill='%23fff' font-family='Georgia, Times New Roman, serif' font-size='21' letter-spacing='1.5'%3ESayg%C4%B1yla An%C4%B1yoruz%3C/text%3E%3C/svg%3E") 50% bottom / auto 100% no-repeat;
  opacity: .9;
}

@media (max-width: 768px) {
  header::after {
    opacity: .75;
    background-position: 70% 50%, 55% 50%;
    background-size: auto 80%, auto 60%;
  }
}

/* x99 override: homepage header stays themed: 08-homepage.css turns it white until the page is scrolled; a themed header must look the same at the top of the page */
body.homepage:not(.hero-scrolled) header.mobile {
  background:
    /* soft light behind the silhouette */
    radial-gradient(ellipse 22% 130% at 60% 60%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(100deg,
      rgba(0, 0, 0, .95)     0%,
      rgba(18, 18, 18, .92)  40%,
      rgba(28, 28, 28, .90)  60%,
      rgba(10, 10, 10, .93)  80%,
      rgba(0, 0, 0, .95)     100%) !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .5) !important;
}

body.homepage:not(.hero-scrolled) header.mobile .mainlogo a.logopair .logo-white {
  opacity: 1;
}

body.homepage:not(.hero-scrolled) header.mobile .mainlogo a.logopair .logo-navy {
  opacity: 0;
}

body.homepage:not(.hero-scrolled) header.mobile * {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .25) !important;
}

body.homepage:not(.hero-scrolled) header.mobile .fsm-root {
  --fsm-trigger-bg: #fff;
  --fsm-trigger-fg: #024187;
}