@charset "UTF-8";

/* ============================================================
   AB1 design language — site-wide layer, 2026-09-14
   ============================================================

   Loaded after style.css, pages.css and modules.css on every static page, and
   after style.css in the portal. It re-points the tokens those files already
   resolve against, so the 70 pages that were not redesigned take the new
   typeface, palette and button shape without their own rules being rewritten.

   Source: design_handoff_anasayfa_panel/README.md → "Design tokens".
   Client decision, 2026-09-14: this supersedes the Source Sans 3 / yellow-CTA
   system recorded in CLAUDE.md. The old values are still in style.css; deleting
   this file restores them.

   What the swap had to handle, because the old tokens meant different things:
     • --cta was a yellow BED for navy text. The design's primary action is navy
       with white text on a light ground and white with navy text on a dark
       one — so every rule that painted a button on --cta is restated below,
       and --cta itself becomes the accent-light blue, which still reads as an
       accent where old rules use it as text on navy.
     • --font-display carried some interface labels (masthead buttons, tabs)
       as well as headings. It is Newsreader now, so those are put back on the
       body face explicitly. */

:root {
  /* --- The design's palette, by name --- */
  --ab-ink:      #10264a;
  --ab-accent:   #1f4e9e;
  --ab-alt:      #8fb0ea;
  --ab-vlt:      #e4ebf8;
  --ab-soft:     #eef2fb;
  --ab-bg:       #f4f6fa;
  --ab-card:     #ffffff;
  --ab-line:     #dde3ee;
  --ab-line2:    #eef1f6;
  --ab-line3:    #e6ebf3;
  --ab-body:     #4a5a78;
  --ab-mute:     #66738a;
  --ab-ph:       #8a95a8;
  --ab-off:      #c5cfe0;
  --ab-ondark:   #c9d8f2;
  --ab-ondark2:  #aab6cc;
  --ab-rail:     #8fa3c8;
  --ab-foot:     #0b1b36;
  --ab-deep:     #0b1f3a;
  --ab-orange:   #ff6a13;
  --ab-orange2:  #ffd9c2;
  --ab-orange3:  #fff0e6;
  --ab-orangeink:#9a4a12;
  --ab-warnbg:   #fdf3dc;
  --ab-warn:     #9a6b12;
  --ab-ok:       #2f9e6b;
  --ab-shadow:   0 30px 60px -40px rgba(16, 38, 74, .35);
  --ab-drop:     0 30px 60px -20px rgba(0, 0, 0, .5);
  --ab-pad:      clamp(16px, 4.45vw, 64px);

  /* --- Typography --- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-ident:   'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* --- Legacy tokens, re-pointed --- */
  --void:      var(--ab-bg);
  --paper:     #ffffff;
  --panel:     #ffffff;
  --ink:       var(--ab-ink);
  --body:      var(--ab-body);
  --mute:      var(--ab-mute);
  --navy:      var(--ab-ink);
  --navy-lo:   var(--ab-accent);
  --navy-deep: var(--ab-deep);
  --bar-bg:    var(--ab-ink);
  --blue:      var(--ab-accent);
  --blue-deep: var(--ab-accent);
  --blue-on-dark: var(--ab-alt);
  --hud-accent: var(--ab-accent);
  --tint:      var(--ab-soft);
  --cta:       var(--ab-alt);
  --cta-lo:    #7aa0e0;
  --cta-glow:    none;
  --cta-glow-hi: none;
  --action:    var(--ab-accent);
  --action-lo: var(--ab-ink);
  --edge:      1px solid var(--ab-line);
  --lift:      var(--ab-shadow);
  --lift-hi:   var(--ab-shadow);

  /* Radius: buttons 3, cards 4, panels 6–8 (README → "Boşluk & şekil"). */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 8px;

  /* The utility strip is gone: the design has one header row, with the
     language switch inside it. --header-h is derived, so this propagates. */
  --util-h: 0px;
}
@media (max-width: 720px) {
  :root { --util-h: 0px; }
}

body { font-family: var(--font-body); color: var(--ab-ink); }

/* Headings take the display face at its regular weight — the design never
   sets Newsreader bold. Listed by class because the old rules set 700 on the
   class, and a later element selector would lose to them. */
h1, h2, h3,
.section-title, .page__title, .hero__title, .school__title, .close__title,
.pp__title, .qualify__sentence, .founder__name, .related__title,
.faqgroup__title, .mega__promo-title, .qopt__title, .qcard__q, .jstep__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.section-title em, .hero__title em { font-style: italic; }

/* Interface labels that used the display token for weight, not for voice. */
.mact, .udrop__item, .udrop__head, .svc__tab, .qopt__label, .ppc__eyebrow,
.pos__sector, .etl__k, .eappt__eyebrow, .ereach__label, .assess__eyebrow,
.fplate__role, .path__audience, .legaldlg__body, .escope__grid,
.ecmp__col--ours, .close__inner, .qopt__panel, .portalband__claim, .eclaim,
.assess__inner {
  font-family: var(--font-body);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--ab-mute);
}
.eyebrow::before { background: var(--ab-orange); width: 24px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 3px;
  padding: 14px 24px;
}
.btn::after { content: none; }
.btn:hover { transform: none; }

.btn--primary,
.btn--action,
.btn--emerald,
.btn--gold {
  background: var(--ab-ink);
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover,
.btn--action:hover,
.btn--emerald:hover,
.btn--gold:hover { background: var(--ab-deep); box-shadow: none; }

.btn--outline,
.btn--ghost {
  background: transparent;
  color: var(--ab-ink);
  border-color: var(--ab-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn--outline:hover,
.btn--ghost:hover { border-color: var(--ab-ink); background: transparent; }

/* On a dark ground the roles invert: white filled, white outlined. */
.btn--film,
.mega__promo .btn--primary {
  background: #fff;
  color: var(--ab-ink);
  box-shadow: none;
}
.btn--film:hover,
.mega__promo .btn--primary:hover { background: var(--ab-vlt); box-shadow: none; }
.btn--filmghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn--filmghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

/* ---------- Masthead ---------- */
.util { display: none; }

/* Not sticky — client's call, 2026-09-14: the header scrolls away with the
   page. Absolute rather than static so it still sits over the film hero and
   the document keeps paying the --header-h offset it already pays; the mega
   panels and the mobile drawer hang off it exactly as before. */
.masthead {
  position: absolute;
  background: var(--ab-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.masthead.is-stuck { box-shadow: none; }

.masthead .nav__link,
.masthead .nav__caretbtn { color: #d9e1f0; font-size: 14px; font-weight: 400; }
.masthead .nav__link:hover,
.masthead .nav__caretbtn:hover,
.masthead .nav__link[aria-current='page'] { color: #fff; }

/* The EAC lockup (client's brand kit, 2026-09-15), inlined by templates.mjs so
   it takes the masthead's colour through currentColor. Kit rules: never
   stretched, 28px tall in the header, never narrower than 140px, cream on
   navy. */
.wordmark--ab {
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
  color: #f2efe8;
  line-height: 0;
}
.masthead .wordmark--ab { color: #f2efe8; }
.wordmark__logo { display: block; height: 28px; width: auto; aspect-ratio: 253.58 / 34; }

/* Language: mono letters, the current one white, no pill. */
.masthead__lang { display: block; }
.masthead .langswitch {
  border: 0;
  border-radius: 0;
  gap: 10px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0;
}
.masthead .langswitch__current,
.masthead .langswitch__other {
  min-width: 0;
  min-height: 34px;
  padding: 0 2px;
  background: none;
}
.masthead .langswitch__current { color: #fff; }
.masthead .langswitch__other { color: var(--ab-rail); }
.masthead .langswitch__other:hover { color: #fff; background: none; }
.masthead .langswitch__other:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.masthead__end { gap: 18px; }

/* Sign-in: outlined white, with a caret. */
.mact {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  letter-spacing: 0;
}
html:lang(de) .mact { font-size: 13px; padding: 0 14px; }
.masthead .mact--login {
  height: 40px;
  padding: 0 18px;
  gap: 8px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
}
.masthead .mact--login:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }

/* Phones (client, 2026-09-15): menu on the left, logo in the middle, a user
   icon on the right that opens the candidate and employer sign-ins. The end
   group dissolves into the header row so the burger can move to the front. */
.masthead .mact-door--user { display: none; }
.nav__lang { display: none; }
@media (max-width: 767px) {
  .masthead__inner { position: relative; }
  .masthead__end { display: contents; }
  .masthead .navtoggle { order: -1; }
  .masthead .wordmark--ab {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /* 24px keeps the lockup 179px wide: above the kit's 140px minimum and clear
     of the menu and user buttons on a 360px phone. */
  .masthead .wordmark__logo { height: 24px; }
  /* TR/DE lives in the menu on a phone (client, 2026-09-15). */
  .masthead__lang { display: none; }
  .masthead .mact-door--user { order: 2; display: inline-flex; margin-left: auto; }
  .nav__lang {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ab-line);
  }
  .masthead .nav__lang .langswitch { gap: 16px; font-size: 14px; }
  .masthead .nav__lang .langswitch__current,
  .masthead .nav__lang .langswitch__other { min-height: 44px; display: inline-flex; align-items: center; }
  .masthead .nav__lang .langswitch__current { color: var(--ab-ink); font-weight: 600; }
  .masthead .nav__lang .langswitch__other { color: var(--ab-accent); text-decoration: underline; text-underline-offset: 3px; }
  .masthead .mact--user {
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: transparent;
    color: #fff;
  }
  .masthead .mact--user .ico { width: 18px; height: 18px; }
  /* Anchored to the icon's right edge: style.css pins phone dropdowns to the
     left of their trigger, which would push this one past the screen edge. */
  .masthead .mact-door--user .udrop--user {
    left: auto;
    right: 0;
    min-width: 0;
  }
  .udrop--user {
    width: 230px;
    padding: 8px;
    gap: 4px;
    border: 0;
    border-radius: 8px;
    box-shadow: var(--ab-drop);
  }
  .udrop__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 6px;
    color: var(--ab-ink);
    font-size: 14px;
    font-weight: 500;
  }
  .udrop__link:hover { background: var(--ab-bg); }
  /* With scripts, only the tap state opens it, so a second tap closes it.
     Otherwise style.css's :focus-within kept it open while the icon held focus. */
  html.js .mact-door--user .udrop--user { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  html.js .mact-door--user.is-open .udrop--user { opacity: 1; visibility: visible; transform: none; }
  .udrop__link .ico { width: 17px; height: 17px; color: var(--ab-accent); }
}

.mact--cta,
html:lang(de) .mact--cta {
  height: 40px;
  padding: 0 20px;
  border-radius: 3px;
  background: #fff;
  color: var(--ab-ink);
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
}
.mact--cta:hover { background: var(--ab-vlt); box-shadow: none; }

/* The sign-in panel: two boxes side by side, candidate dark, employer light. */
.udrop--login {
  padding: 12px;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  box-shadow: var(--ab-drop);
  color: var(--ab-ink);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 1025px) {
  .mact-door--login .udrop--login { width: 440px; top: calc(100% + 10px); }
}

/* With scripts on, only the click state opens it — the design toggles, and a
   hover that opens it independently would fight the toggle. Without scripts,
   style.css's :hover and :focus-within rules still open it. */
html.js .mact-door--login .udrop--login { opacity: 0; visibility: hidden; transform: translateY(-6px); }
html.js .mact-door--login.is-open .udrop--login { opacity: 1; visibility: visible; transform: none; }

.lbox {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
  border-radius: 6px;
  background: var(--ab-bg);
  color: var(--ab-ink);
}
.lbox--cand { background: var(--ab-ink); color: #fff; }
.lbox__ico {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--ab-vlt);
  color: var(--ab-accent);
}
.lbox--cand .lbox__ico { background: rgba(255, 255, 255, .14); color: #fff; }
.lbox__ico .ico { width: 17px; height: 17px; }
.lbox__t { margin-top: 12px; font-size: 15px; font-weight: 600; }
.lbox__d { margin-top: 4px; font-size: 12px; line-height: 1.45; opacity: .75; }
.lbox__go {
  margin-top: 14px;
  padding: 9px;
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  background: var(--ab-ink);
  color: #fff;
}
.lbox--cand .lbox__go { background: #fff; color: var(--ab-ink); }
.lbox__go:hover { opacity: .9; }

/* The drawer's doors and CTA, restated for the new palette. */
@media (max-width: 1024px) {
  .navdoor--emp { border-color: var(--ab-line); background: var(--ab-bg); }
  .navdoor--emp .ico { color: var(--ab-accent); }
  .masthead .nav .nav__link,
  .masthead .nav .nav__caretbtn { color: var(--ab-ink); }
}

/* ---------- Mega panel ---------- */
.megaitem__ico { background: var(--ab-vlt); color: var(--ab-accent); border-radius: 6px; }
.megacol__label { font-family: var(--font-mono); letter-spacing: .08em; }
.mega__promo { border-radius: 8px; }

/* ---------- Actions elsewhere in the chrome ---------- */
.udrop__item--cta {
  background: var(--ab-ink);
  color: #fff;
  border-radius: 3px;
  box-shadow: none;
}
.udrop__item--cta:hover { background: var(--ab-deep); color: #fff; box-shadow: none; }

@media (max-width: 720px) {
  .mbar__cta {
    background: var(--ab-ink);
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 10px 24px -12px rgba(16, 38, 74, .6);
    font-weight: 500;
  }
  .mbar__cta:active { background: var(--ab-deep); }
  .mbar__wa { border-radius: 3px; }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ab-foot);
  color: var(--ab-ondark2);
}
.footer__legalnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0;
  font-size: 13px;
}
.footer__legalnav a {
  color: #dbe4f5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__legalnav a:hover { color: #fff; }
.footer__h,
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
.footer__col a,
.footer__col p { color: var(--ab-ondark2); font-size: 14px; }
.footer__col a:hover { color: #fff; }
.footer .mono { color: var(--ab-ondark2); }
.footer__sitemap { border-color: rgba(255, 255, 255, .12); }
.footer__sitemap a { color: var(--ab-ondark2); }
.footer__sitemap a:hover { color: #fff; }
.footer__legal { border-top-color: rgba(255, 255, 255, .12); }
.footer__legal p { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; color: #7d8aa3; }

.skiplink { font-family: var(--font-body); }