/**
 * Coming-soon overlay — "Başvuru sistemi · Yakında"
 *
 * A self-contained, fully-scoped gate shown over the contact and
 * submit-case templates while the online application + mail flow are
 * not yet live. The real page renders faintly behind a frosted, semi
 * -transparent veil; the card floats on top. Sourced from
 * Taslaklar/Site Taslakları/basvuru-yakinda.html.
 *
 * z-index 90 sits BELOW the sticky site header / mobile header (z-100)
 * and the mobile drawer (z-99) on purpose: the overlay covers the page
 * content but leaves the nav usable, so a visitor is never trapped.
 *
 * All design tokens are local to .ngs-coming-soon so this never
 * collides with the page-scoped tokens on .page-contact /
 * .page-submit-case. Fonts reuse the theme's self-hosted families
 * (fonts.css), so no external CDN.
 */

.ngs-coming-soon {
  --cs-paper: #F7F8FA;
  --cs-ink: #0B1220;
  --cs-ink-2: #1B2536;
  --cs-muted: #6B7689;
  --cs-line-2: #D9DEE6;
  --cs-blue: #2B6CB0;
  --cs-blue-deep: #1E4E7E;
  --cs-serif: "Newsreader", Georgia, serif;
  --cs-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --cs-mono: "JetBrains Mono", ui-monospace, monospace;

  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 88px 22px 40px; /* top pad clears the sticky header */
  overflow-y: auto;

  /* The page shows through faintly: translucent paper veil + frost. */
  background: rgba(238, 241, 245, 0.72);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
  backdrop-filter: blur(7px) saturate(115%);

  font-family: var(--cs-sans);
  color: var(--cs-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  animation: ngs-cs-fade 0.4s ease both;
}

/* Lock the page behind the overlay so it cannot scroll under the veil. */
body:has(.ngs-coming-soon) {
  overflow: hidden;
}

@keyframes ngs-cs-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ngs-coming-soon__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--cs-paper);
  border: 1px solid var(--cs-line-2);
  border-radius: 18px;
  padding: 44px 38px 40px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
              0 30px 70px -34px rgba(11, 18, 32, 0.5);
  animation: ngs-cs-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ngs-cs-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slim accent rule along the top. */
.ngs-coming-soon__card::before {
  content: "";
  position: absolute;
  left: 38px;
  right: 38px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cs-blue), var(--cs-blue-deep));
  border-radius: 0 0 2px 2px;
}

.ngs-coming-soon__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cs-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-blue-deep);
  margin-bottom: 22px;
}

.ngs-coming-soon__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-blue);
  box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.14);
  animation: ngs-cs-pulse 2.4s ease-in-out infinite;
}

@keyframes ngs-cs-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(43, 108, 176, 0.14); }
  50%      { box-shadow: 0 0 0 7px rgba(43, 108, 176, 0.05); }
}

.ngs-coming-soon__title {
  font-family: var(--cs-serif);
  font-weight: 500;
  font-size: 29px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--cs-ink);
  text-wrap: balance;
}

.ngs-coming-soon__lede {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--cs-ink-2);
  margin: 0;
  max-width: 40ch;
}

.ngs-coming-soon__contact {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--cs-line-2);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ngs-coming-soon__contact-label {
  font-family: var(--cs-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-muted);
}

.ngs-coming-soon__mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--cs-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--cs-blue-deep);
  text-decoration: none;
  width: fit-content;
  transition: color 0.2s ease;
}

.ngs-coming-soon__mail svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--cs-blue);
  transition: transform 0.2s ease;
}

.ngs-coming-soon__mail:hover { color: var(--cs-blue); }
.ngs-coming-soon__mail:hover svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .ngs-coming-soon,
  .ngs-coming-soon__card,
  .ngs-coming-soon__dot,
  .ngs-coming-soon__mail svg {
    animation: none;
    transition: none;
  }
}