/* ==========================================================================
   First Step Education Pathway — design system
   Single stylesheet. Sections: tokens, base, layout, header, buttons,
   hero, cards, sections, gallery, forms, career tool, footer, motion.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* brand ink */
  --ink-900: #061A17;
  --ink-800: #0A2521;
  --ink-700: #10352F;
  --ink-600: #1B4A42;

  /* surfaces */
  --bg: #F8F7F3;
  --bg-tint: #EFF3EE;
  --surface: #FFFFFF;
  --surface-2: #F3F1EB;

  /* text */
  --text: #10201D;
  --text-2: #3E524E;
  --muted: #64766F;
  --on-dark: #EAF3EF;
  --on-dark-muted: #9FB8B0;

  /* accents */
  --accent: #FF5B3E;
  --accent-ink: #D93E23;
  --mint: #12C6A0;
  --mint-dark: #0E9C7E;
  --amber: #FFC24B;

  /* lines & shadow */
  --line: #E1E0D8;
  --line-strong: #CBCEC5;
  --ring: 0 0 0 3px rgba(18, 198, 160, .35);
  --shadow-sm: 0 1px 2px rgba(6, 26, 23, .05), 0 2px 8px rgba(6, 26, 23, .04);
  --shadow-md: 0 4px 12px rgba(6, 26, 23, .07), 0 12px 32px rgba(6, 26, 23, .07);
  --shadow-lg: 0 8px 20px rgba(6, 26, 23, .09), 0 28px 60px rgba(6, 26, 23, .12);

  /* type */
  --font-display: "Sora", "Segoe UI Variable Display", "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* metrics */
  --max: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --nav-h: 68px;
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* subtle page atmosphere — one fixed layer, no repaint cost while scrolling */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 88% -8%, rgba(18, 198, 160, .13), transparent 62%),
    radial-gradient(48rem 32rem at -6% 12%, rgba(255, 91, 62, .09), transparent 60%),
    var(--bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
  color: var(--text);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.025em; }
h4 { font-size: 1.02rem; letter-spacing: -.015em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; background: var(--surface-2); }
figure { margin: 0; }
strong, b { font-weight: 650; }

::selection { background: var(--mint); color: var(--ink-900); }

/* Inline icons default to 300x150 without this. Specific rules below win. */
main svg:not([width]), .site-header svg:not([width]),
.site-footer svg:not([width]), .cookie-notice svg:not([width]) {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mint-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

/* language switching */
[hidden] { display: none !important; }
body:not(.tr-active) .lang-tr { display: none; }
body.tr-active .lang-en { display: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink-900);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - (var(--gutter) * 2), 820px); margin-inline: auto; }

.section { padding: clamp(48px, 7vw, 96px) 0; }
.section-tight { padding: clamp(32px, 4vw, 56px) 0; }
.section + .section { padding-top: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint-dark);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}
.eyebrow-plain::before { display: none; }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 58ch;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.section-head > p { margin: 0; color: var(--text-2); max-width: 52ch; }
.section-head h2 { margin-bottom: 0; }
.section-head-center {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.section-head-center > p { max-width: 58ch; }

/* ---------- 4. Header / navigation --------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 10px 0;
  background: rgba(248, 247, 243, .82);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px rgba(6, 26, 23, .06);
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--nav-h);
}

/* brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
  padding: 4px;
  border-radius: var(--r-sm);
}
.brand picture { display: flex; flex: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: grid; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.01rem;
  letter-spacing: -.04em;
  color: var(--text);
  white-space: nowrap;
}
.brand-name em { font-style: normal; color: var(--mint-dark); }
.brand-sub {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .19em;
  /* The text is typed in capitals in the HTML on purpose. text-transform would
     turn the "i" into a dotted "İ" whenever the page language is Turkish. */
  color: var(--muted);
  white-space: nowrap;
}

/* nav links */
.navlinks {
  display: flex;
  align-items: center;
  gap: 2px;
}
.navlinks > a,
.nav-drop > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: .855rem;
  font-weight: 550;
  letter-spacing: -.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.navlinks > a:hover,
.nav-drop > button:hover,
.nav-drop.open > button {
  color: var(--text);
  background: rgba(6, 26, 23, .055);
}
.navlinks > a.active {
  color: var(--ink-900);
  background: rgba(18, 198, 160, .16);
  font-weight: 650;
}
.nav-drop > button::after {
  content: "";
  width: 6px; height: 6px;
  margin-top: -3px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .2s ease;
}
.nav-drop.open > button::after { transform: rotate(225deg) translate(-2px, -2px); }

/* dropdown panel */
.nav-drop { position: relative; }
.nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  z-index: 60;
  width: max-content;
  max-width: min(92vw, 560px);
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-drop.open .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 4px; }
.nav-panel a {
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  transition: background .15s ease;
}
.nav-panel a:hover { background: var(--bg-tint); }
.nav-panel a b {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--text);
}
.nav-panel a span { font-size: .76rem; color: var(--muted); line-height: 1.4; }
.nav-panel-all {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.nav-panel-all a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-tint);
  font-size: .82rem;
  font-weight: 650;
  color: var(--ink-800);
}
.nav-panel-all a:hover { background: rgba(18, 198, 160, .16); }

/* nav utilities
   NB: these selectors must out-rank `.navlinks > a` (which sets background:none),
   otherwise the Contact pill loses its dark fill and its white text disappears. */
.navlinks > a.nav-news {
  gap: 7px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-800);
  font-weight: 600;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.nav-news svg { width: 15px; height: 15px; flex: none; color: var(--mint-dark); }
.navlinks > a.nav-news:hover {
  background: rgba(18, 198, 160, .1);
  border-color: var(--mint-dark);
  color: var(--ink-900);
}
.navlinks > a.nav-news.active {
  background: rgba(18, 198, 160, .16);
  border-color: var(--mint-dark);
}

.navlinks > a.nav-cta {
  margin-left: 2px;
  padding: 9px 18px;
  background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(6, 26, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .09);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.navlinks > a.nav-cta:hover,
.navlinks > a.nav-cta.active {
  background: linear-gradient(180deg, var(--ink-600), var(--ink-800));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(6, 26, 23, .26), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.langswitch {
  display: inline-flex;
  padding: 3px;
  margin-left: 4px;
  background: rgba(6, 26, 23, .07);
  border-radius: 999px;
}
.langswitch button {
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.langswitch button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 17px; height: 1.8px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--text);
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after { top: 5.5px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  box-shadow: 0 2px 6px rgba(6, 26, 23, .16);
}
.btn:hover { background: var(--ink-700); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(6, 26, 23, .2); }
.btn:active { transform: translateY(0); }

.btn-accent { background: var(--accent); box-shadow: 0 2px 10px rgba(255, 91, 62, .3); }
.btn-accent:hover { background: var(--accent-ink); box-shadow: 0 10px 26px rgba(255, 91, 62, .34); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { background: var(--surface); border-color: var(--text-2); box-shadow: var(--shadow-sm); }


.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); box-shadow: none; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); }

.btn-sm { padding: 9px 16px; font-size: .84rem; }
.btn[disabled] { opacity: .42; pointer-events: none; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-ink);
  font-weight: 600;
  border-bottom: 1.5px solid rgba(255, 91, 62, .32);
  padding-bottom: 1px;
  transition: border-color .16s ease, gap .16s ease;
}
.textlink:hover { border-color: var(--accent); gap: 10px; }


/* ---------- 6. Hero ------------------------------------------------------ */
.hero { padding: clamp(36px, 5vw, 68px) 0 clamp(40px, 5vw, 72px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero-copy h1 { margin-bottom: .35em; }
.hero-copy .lede { font-size: clamp(1.04rem, 1.6vw, 1.22rem); }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 7px;
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 550;
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
}
.hero-badge i {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mint), var(--mint-dark));
  color: #fff;
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
}

/* headline emphasis */
.hl {
  color: var(--ink-900);
  white-space: nowrap;
  /* the highlight is a background (not a ::after box) so it follows every line the phrase wraps onto */
  background: linear-gradient(100deg, rgba(18, 198, 160, .42), rgba(255, 194, 75, .5)) no-repeat;
  background-size: 100% .32em;
  background-position: 0 calc(100% - .05em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* hero collage */
.hero-art {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  height: clamp(320px, 42vw, 480px);
}
.hero-art figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  background: var(--surface-2);
}
.hero-art figure:first-child { grid-row: span 2; border-radius: var(--r-xl); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-art figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(190deg, transparent 55%, rgba(6, 26, 23, .3));
}


/* trust strip */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.trust div { display: flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 550; color: var(--text-2); }
.trust svg { width: 17px; height: 17px; flex: none; color: var(--mint-dark); }

/* page hero (interior pages) */
.page-hero { padding: clamp(28px, 4vw, 52px) 0 clamp(28px, 3.5vw, 44px); }
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(26px, 4.5vw, 64px);
  align-items: center;
}
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.page-hero-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 58%, rgba(6, 26, 23, .34));
}
.media-tag {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 2;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--ink-800);
}

/* ---------- 7. Cards ----------------------------------------------------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* destination card — image + copy, used on the home page */
.dest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease, border-color .26s ease;
}
.dest-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.dest-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.dest-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.dest-card:hover .dest-media img { transform: scale(1.06); }
.dest-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,26,23,.04) 35%, rgba(6,26,23,.55));
}
.dest-count {
  position: absolute;
  left: 14px; top: 14px;
  z-index: 2;
  padding: 5px 11px;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(5px);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-800);
}
.dest-title {
  position: absolute;
  left: 18px; right: 18px; bottom: 14px;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.035em;
}
.dest-body { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 18px 20px 20px; }
.dest-body p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--text-2); }
.dest-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
  font-size: .82rem;
  font-weight: 650;
  color: var(--accent-ink);
}
.dest-foot svg { width: 16px; height: 16px; transition: transform .2s ease; }
.dest-card:hover .dest-foot svg { transform: translateX(4px); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 4px 10px;
  background: var(--bg-tint);
  border-radius: 999px;
  font-size: .71rem;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
}

/* country card — used on region pages */
.country-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.country-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--mint); }
.country-card figure {
  width: 74px; height: 62px;
  flex: none;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-2);
}
.country-card img { width: 100%; height: 100%; object-fit: cover; }
.country-card .cc-text { display: grid; gap: 1px; min-width: 0; }
.country-card b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -.025em;
  color: var(--text);
}
.country-card small { font-size: .76rem; color: var(--muted); }
.country-card .cc-arrow {
  margin-left: auto;
  color: var(--line-strong);
  transition: transform .2s ease, color .2s ease;
}
.country-card:hover .cc-arrow { color: var(--mint-dark); transform: translateX(3px); }

/* group heading */
.group + .group { margin-top: clamp(30px, 4vw, 48px); }
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.group-head h3 { margin: 0; font-size: 1.22rem; }
.group-head span { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* generic info card */
.info-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.info-card h3 { margin: 0; }
.info-card p { margin: 0; color: var(--text-2); font-size: .93rem; }
.info-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: 4px;
  border-radius: 13px;
  background: linear-gradient(140deg, rgba(18,198,160,.18), rgba(18,198,160,.06));
  color: var(--mint-dark);
}
.info-icon svg { width: 21px; height: 21px; }

/* numbered steps */
.steps { counter-reset: step; }
.step { position: relative; counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--accent);
}

/* ---------- 8. Facts, tables, notices ------------------------------------ */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.fact { display: grid; gap: 4px; padding: clamp(16px, 2vw, 22px); background: var(--surface); }
.fact .eyebrow { margin: 0 0 2px; font-size: .66rem; color: var(--muted); }
.fact .eyebrow::before { display: none; }
.fact strong {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--ink-900);
  line-height: 1.25;
}
.fact small { font-size: .73rem; color: var(--muted); }

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: .93rem;
}
.data-table th, .data-table td { padding: 16px 20px; text-align: left; vertical-align: top; }
.data-table th {
  width: 30%;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .9rem;
  letter-spacing: -.015em;
  color: var(--ink-800);
}
.data-table td { color: var(--text-2); }
.data-table tr + tr th, .data-table tr + tr td { border-top: 1px solid var(--line); }
.data-table tr:hover td, .data-table tr:hover th { background: rgba(18, 198, 160, .045); }

/* notice — a compact reminder card, not a full dark panel. Only used once
   (the YÖK recognition note on the home page), so it should read light and
   quick, not compete with the CTA band right below it. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  background: rgba(18, 198, 160, .07);
  border: 1px solid rgba(18, 198, 160, .28);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.notice-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--mint-dark); }
.notice-body { display: grid; gap: 6px; }
.notice-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink-900); }
.notice p { margin: 0; color: var(--text-2); font-size: .85rem; line-height: 1.55; max-width: 74ch; }
.notice a { color: var(--mint-dark); border-bottom: 1px solid rgba(14, 156, 126, .35); text-decoration: none; }
.notice a:hover { border-color: var(--mint-dark); }
.notice-source { font-size: .78rem !important; color: var(--muted); }
@media (max-width: 560px) {
  .notice { padding: 14px 16px; gap: 10px; border-radius: var(--r); }
  .notice-icon { width: 19px; height: 19px; }
  .notice-title { font-size: .9rem; }
  .notice p { font-size: .79rem; line-height: 1.5; }
  .notice-source { font-size: .74rem !important; }
}

.callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255, 194, 75, .13);
  border: 1px solid rgba(255, 194, 75, .38);
  border-radius: var(--r);
  font-size: .9rem;
  color: var(--text-2);
}
.callout svg { width: 20px; height: 20px; flex: none; color: #B8820E; margin-top: 2px; }
.callout p { margin: 0; }

/* ---------- 9. Split & gallery ------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
}
.split-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 4;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 10. Closing CTA band ----------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 7vw, 92px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-xl);
  color: #fff;
  isolation: isolate;
  box-shadow: var(--shadow-lg);
}
.cta-band img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(6, 26, 23, .93) 8%, rgba(6, 26, 23, .74) 48%, rgba(6, 26, 23, .42) 100%);
}
.cta-band .eyebrow { color: var(--mint); }
.cta-band h2 {
  max-width: 17ch;
  margin-bottom: .4em;
  color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
}
.cta-band p { max-width: 46ch; color: rgba(234, 243, 239, .86); font-size: 1.02rem; }

/* ---------- 11. University finder & result cards ------------------------- */
.finder {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
  padding: clamp(16px, 2vw, 22px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.field { display: grid; gap: 6px; min-width: 0; }
.field > span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select, .contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .92rem;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364766F' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.field input:focus, .field select:focus,
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--mint-dark);
  background: var(--surface);
  box-shadow: var(--ring);
}
.finder .btn { white-space: nowrap; }

.finder-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 20px;
  font-size: .87rem;
  color: var(--muted);
}
.finder-meta b { color: var(--text); font-weight: 650; }

.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }

/* ---- university card ---------------------------------------------------- */
.uni-card {
  --tone: 18, 198, 160;          /* r,g,b of this card's accent */
  --tone-ink: var(--ink-900);    /* text colour that sits on the accent */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.uni-card::before {              /* soft glow in the corner */
  content: "";
  position: absolute;
  z-index: -1;
  top: -70px; right: -70px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--tone), .2), transparent);
  transition: transform .4s ease, opacity .4s ease;
}
.uni-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(var(--tone), .55); }
.uni-card:hover::before { transform: scale(1.25); }

.uni-flag {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(145deg, rgb(var(--tone)), rgba(var(--tone), .68));
  color: var(--tone-ink);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .02em;
  box-shadow: 0 6px 14px rgba(var(--tone), .32), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.uni-card h3 { margin: 6px 0 0; font-size: 1.06rem; line-height: 1.28; letter-spacing: -.015em; }
.uni-loc { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .82rem; font-weight: 550; color: var(--muted); }
.uni-loc svg { width: 14px; height: 14px; flex: none; color: rgb(var(--tone-deep, var(--tone))); }
.uni-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.uni-tags span {
  padding: 4px 10px;
  background: var(--bg-tint);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-700);
}
.uni-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}
.uni-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.uni-links a.primary {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink-900);
  color: #fff;
  transition: background .16s ease, transform .16s ease;
}
.uni-links a.primary:hover { background: var(--ink-600); transform: translateY(-1px); }
.uni-links a.secondary { color: var(--muted); font-weight: 550; }
.uni-links a.secondary:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.uni-links svg { width: 13px; height: 13px; }

/* ---- catalogue rail (cards load sideways) ------------------------------- */
.uni-stage { margin-top: 28px; }
.uni-stage[hidden], .uni-stage [hidden] { display: none !important; }
.uni-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.uni-stage .finder-meta { display: block; margin: 0; line-height: 1.5; }
.uni-stage .finder-meta b { margin-right: 4px; }
.rail-nav { display: flex; gap: 8px; flex: none; }
.rail-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease, transform .16s ease;
}
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn:hover:not(:disabled) { background: var(--ink-900); border-color: var(--ink-900); color: #fff; transform: translateY(-1px); }
.rail-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }

.uni-rail-wrap {
  --fade-l: 0px; --fade-r: 0px;
  margin-inline: calc(var(--gutter) * -1);
}
.uni-rail-wrap.has-prev { --fade-l: 34px; }
.uni-rail-wrap.has-next { --fade-r: 64px; }
.uni-rail {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 14px var(--gutter) 26px;      /* room for hover-lift + shadows */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.uni-rail::-webkit-scrollbar { display: none; }
.uni-rail:focus-visible { outline: none; }
.uni-rail:focus-visible .uni-card:first-child { box-shadow: var(--ring); }
.uni-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.uni-rail.is-dragging .uni-card { transform: none; }
.uni-rail a { -webkit-user-drag: none; }
.uni-rail > .uni-card,
.uni-rail > .uni-more {
  flex: 0 0 calc((100% - 3 * 16px) / 3.3);   /* 3 cards + a peek of the next */
  min-width: 268px;
  scroll-snap-align: start;
}
.uni-rail > .uni-card { animation: uniIn .55s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes uniIn { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }

.uni-more {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 22px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .6);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .25s cubic-bezier(.2,.8,.3,1);
}
.uni-more:hover { border-color: var(--mint-dark); background: rgba(18, 198, 160, .08); transform: translateY(-4px); }
.uni-more-num {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 750;
  transition: transform .25s ease;
}
.uni-more:hover .uni-more-num { transform: scale(1.08) rotate(-4deg); }
.uni-more b { font-size: .98rem; font-weight: 700; }
.uni-more small { font-size: .78rem; color: var(--muted); }

.rail-progress { height: 4px; margin-top: -8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rail-progress span {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--mint-dark));
  transition: width .2s ease;
  will-change: transform;
}

.empty-state {
  padding: 46px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--muted);
}

/* ---------- 12. Forms ---------------------------------------------------- */
.contact-form {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.contact-form label { display: grid; gap: 6px; }
.contact-form label > span:first-child,
.contact-form .label {
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--text-2);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { justify-self: start; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-note { margin: 0; font-size: .81rem; color: var(--muted); }
.consent { grid-template-columns: auto 1fr !important; align-items: start; gap: 10px !important; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--mint-dark); }
.consent span { font-size: .84rem; color: var(--text-2); font-weight: 400; }

.captcha-box {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.captcha-box label { gap: 8px; }
.captcha-box input { max-width: 140px; }
.captcha-box b { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }

.trap-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-error {
  padding: 12px 16px;
  background: rgba(255, 91, 62, .1);
  border: 1px solid rgba(255, 91, 62, .34);
  border-radius: 12px;
  color: var(--accent-ink);
  font-size: .86rem;
  font-weight: 550;
}

/* Sending / sent / failed states (see site.js, "forms") */
.form-error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.btn[aria-busy="true"] { cursor: progress; opacity: .85; transform: none; box-shadow: none; }
.btn[aria-busy="true"]::before {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Replaces a form in place once it has been sent. Same card as the form. */
.form-success {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: clamp(24px, 3.4vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  animation: rise .4s cubic-bezier(.2,.8,.3,1) both;
}
.form-success:focus { outline: none; }
.form-success h3 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); letter-spacing: -.02em; }
.form-success p { margin: 0; max-width: 52ch; color: var(--text-2); }
.form-success p b { color: var(--ink-900); overflow-wrap: anywhere; }
.form-success-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.form-success-icon, .thanks-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(18, 198, 160, .14);
  color: var(--mint-dark);
}
.form-success-icon svg:not([width]) { width: 28px; height: 28px; }   /* :not([width]) matches the specificity of the global icon rule */
.thanks-icon { width: 76px; height: 76px; margin: 0 auto 22px; animation: rise .5s cubic-bezier(.2,.8,.3,1) both; }
.thanks-icon svg:not([width]) { width: 38px; height: 38px; }

/* inside the small floating feedback panel: no card within a card */
.form-success.is-compact { padding: 4px 2px 2px; gap: 10px; background: none; border: 0; box-shadow: none; }
.form-success.is-compact .form-success-icon { width: 44px; height: 44px; }
.form-success.is-compact .form-success-icon svg:not([width]) { width: 24px; height: 24px; }
.form-success.is-compact h3 { font-size: 1.15rem; }
.form-success.is-compact p { font-size: .88rem; }

/* ---------- 13. Career guidance tool ------------------------------------- */
.quiz-shell {
  padding: clamp(20px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

.progress-wrap { display: grid; gap: 8px; margin-bottom: 26px; }
.progress-meta { display: flex; justify-content: space-between; font-size: .76rem; font-weight: 650; color: var(--muted); }
.progress-track { height: 6px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--amber));
  transition: width .45s cubic-bezier(.2,.8,.3,1);
}

.country-choice { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 178px), 1fr)); gap: 8px; }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font-size: .87rem;
  font-weight: 550;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.choice:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .tick {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  transition: background .16s ease, border-color .16s ease;
}
.choice .tick svg { width: 12px; height: 12px; color: #fff; opacity: 0; transition: opacity .14s ease; }
.choice:has(input:checked), .choice.is-checked { border-color: var(--mint-dark); background: rgba(18, 198, 160, .1); }
.choice:has(input:checked) .tick, .choice.is-checked .tick { background: var(--mint-dark); border-color: var(--mint-dark); }
.choice:has(input:checked) .tick svg, .choice.is-checked .tick svg { opacity: 1; }
.choice:has(input:disabled), .choice.is-disabled { opacity: .45; cursor: not-allowed; }

.question { display: grid; gap: 18px; }
.question[hidden] { display: none; }
.question-head h3 { margin: 0 0 6px; font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.question-head p { margin: 0; font-size: .89rem; color: var(--muted); }

.scale { display: grid; gap: 8px; }
.scale-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font-size: .94rem;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.scale-option:hover { border-color: var(--line-strong); transform: translateX(2px); }
.scale-option input { position: absolute; opacity: 0; pointer-events: none; }
.scale-dot {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.scale-dot::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--mint-dark);
  transform: scale(0);
  transition: transform .18s cubic-bezier(.2,1.4,.4,1);
}
.scale-option:has(input:checked), .scale-option.is-checked { border-color: var(--mint-dark); background: rgba(18, 198, 160, .1); }
.scale-option:has(input:checked) .scale-dot, .scale-option.is-checked .scale-dot { border-color: var(--mint-dark); }
.scale-option:has(input:checked) .scale-dot::after, .scale-option.is-checked .scale-dot::after { transform: scale(1); }

.quiz-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.quiz-nav .spacer { margin-left: auto; }

/* results */
.code-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 10px 20px;
  background: var(--ink-900);
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 750;
  letter-spacing: .1em;
}
.code-badge small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); font-weight: 700; }

.riasec-bars { display: grid; gap: 12px; }
.riasec-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 44px; gap: 14px; align-items: center; }
.riasec-row b { font-size: .87rem; font-weight: 650; }
.riasec-row i { font-style: normal; font-size: .8rem; font-weight: 650; color: var(--muted); text-align: right; }
.riasec-track { height: 9px; background: var(--bg-tint); border-radius: 999px; overflow: hidden; }
.riasec-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint-dark), var(--mint));
  transition: width .8s cubic-bezier(.2,.8,.3,1);
}
.riasec-row.is-top .riasec-fill { background: linear-gradient(90deg, var(--accent-ink), var(--amber)); }
.riasec-row.is-top b { color: var(--ink-900); }

.subject-card {
  display: grid;
  gap: 10px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.subject-card h4 { margin: 0; font-size: 1.05rem; }
.subject-card p { margin: 0; font-size: .87rem; color: var(--text-2); }
.subject-card .chips { margin-top: 2px; }

/* ---------- 14. Footer --------------------------------------------------- */
.site-footer {
  margin-top: clamp(50px, 7vw, 96px);
  padding: clamp(40px, 5vw, 64px) 0 28px;
  background: var(--ink-900);
  color: var(--on-dark-muted);
  font-size: .87rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3.4vw, 40px);
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: var(--on-dark-muted); }
.footer-brand p { max-width: 34ch; font-size: .86rem; line-height: 1.6; }
.footer-col h4 {
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mint);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-col a { color: var(--on-dark-muted); transition: color .16s ease; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 28px;
  padding-top: 24px;
  font-size: .78rem;
}
.footer-bottom p { margin: 0; max-width: 70ch; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- 15. Cookie notice -------------------------------------------- */
.cookie-notice {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 18px;
  margin: 0 auto;
  max-width: 680px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: var(--ink-900);
  color: var(--on-dark);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  animation: rise .4s cubic-bezier(.2,.8,.3,1) both;
}
.cookie-notice p { margin: 3px 0 0; font-size: .81rem; color: var(--on-dark-muted); }
.cookie-notice strong { font-size: .88rem; }
.cookie-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.cookie-actions a { font-size: .8rem; font-weight: 600; color: var(--mint); }
/* the Accept button used the same dark colour as the banner, so it was invisible */
.cookie-notice .btn { background: #fff; color: var(--ink-900); box-shadow: none; }
.cookie-notice .btn:hover { background: var(--mint); color: var(--ink-900); box-shadow: none; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- 16. Motion --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 17. Responsive ----------------------------------------------- */
@media (max-width: 1080px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .uni-rail > .uni-card, .uni-rail > .uni-more { flex-basis: calc((100% - 2 * 16px) / 2.3); }
}

/* The desktop nav sits inside the 1200px .wrap and needs ~1170px with the
   compact spacing below, so it collapses into the menu at 1280px and under.
   NB: the compact spacing must apply at EVERY desktop width (no upper bound),
   otherwise wide screens overflow the 1200px container. */
@media (min-width: 1281px) {
  .navlinks > a, .nav-drop > button { padding: 9px 8px; font-size: .83rem; }
  .navlinks > a.nav-news { padding: 8px 16px 8px 12px; font-size: .8rem; }
  .navlinks > a.nav-cta { padding: 9px 16px; }
}
@media (max-width: 1280px) {
  .nav-toggle { display: grid; place-items: center; order: 3; }
  .navlinks {
    position: fixed;
    inset: calc(var(--nav-h) + 24px) 14px auto 14px;
    z-index: 99;
    display: grid;
    align-content: start;
    gap: 2px;
    max-height: calc(100dvh - var(--nav-h) - 40px);
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.99);
    transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s;
  }
  body.nav-open .navlinks { opacity: 1; visibility: visible; transform: none; }
  .navlinks > a, .nav-drop > button { width: 100%; justify-content: flex-start; padding: 13px 14px; border-radius: 12px; font-size: .95rem; }
  .nav-drop { width: 100%; }
  .nav-drop > button::after { margin-left: auto; margin-top: 0; }
  .nav-panel {
    position: static;
    translate: none;
    width: 100%;
    max-width: none;
    padding: 4px 0 10px 10px;
    border: 0;
    border-left: 2px solid var(--line);
    margin: 2px 0 6px 14px;
    border-radius: 0;
    box-shadow: none;
    background: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-drop.open .nav-panel { display: block; }
  .nav-panel-grid { grid-template-columns: 1fr; }
  .navlinks > a.nav-news { margin-top: 8px; padding: 13px 14px; }
  .navlinks > a.nav-cta { margin: 6px 0 0; padding: 14px 18px; justify-content: center; }
  .langswitch { margin: 10px 0 0; justify-self: start; }
}

@media (max-width: 980px) {
  .hero-grid, .page-hero-grid, .split { grid-template-columns: 1fr; }
  .hero-grid > *, .page-hero-grid > *, .split > * { min-width: 0; }
  .hero-art { height: clamp(260px, 56vw, 380px); }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .finder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finder > .field:first-child { grid-column: 1 / -1; }
  .finder .btn { grid-column: 1 / -1; }
  .riasec-row { grid-template-columns: 116px minmax(0, 1fr) 40px; gap: 10px; }
}

@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  .uni-toolbar { align-items: flex-end; }
  .uni-rail { gap: 12px; }
  .uni-rail > .uni-card, .uni-rail > .uni-more { flex-basis: 82%; min-width: 0; }
  .rail-btn { width: 40px; height: 40px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .cookie-notice { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookie-actions { justify-content: space-between; }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: auto; }
  .data-table tr { padding: 4px 0; }
  .data-table tr + tr { border-top: 1px solid var(--line); }
  .data-table tr + tr th, .data-table tr + tr td { border-top: 0; }
  .data-table th { padding-bottom: 4px; }
  .data-table td { padding-top: 0; }
  .actions .btn { flex: 1 1 100%; }
  .hero-art { grid-template-columns: 1fr 1fr; height: 300px; }
  .hero-art figure:first-child { grid-row: span 1; grid-column: span 2; }
  .quiz-nav { flex-wrap: wrap; }
  .quiz-nav .btn { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .hl { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* let the headline highlight wrap on small phones */
  .facts { grid-template-columns: 1fr; }
  .country-card figure { width: 58px; height: 52px; }
}

/* ---------- 18. Print ---------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cookie-notice, .actions, .cta-band { display: none !important; }
  body::before { display: none; }
  body { background: #fff; }
}

/* ---------- 19. Image slots (drop-in placeholders) ----------------------- */
/* Add the three sizes named in the box (-400, -800, -1600 .webp) to the folder
   shown and the picture appears. Nothing else needs editing. While the files
   are missing, the box below shows the exact path to drop them in.
   To hide every unfilled slot on the live
   site, add:  .slot.is-empty { display: none !important; }  */
.slot { position: relative; margin: 0; }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slot.is-empty > img { display: none; }
.slot.is-empty {
  display: grid;
  place-content: center;
  align-content: center;
  gap: 6px;
  padding: 16px;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(18,198,160,.06) 0 10px, transparent 10px 20px),
    var(--surface-2);
  border: 2px dashed var(--line-strong);
  box-shadow: none;
}
.slot.is-empty::before {
  content: "\1F5BC  " attr(data-label);
  display: block;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: balance;
}
.slot.is-empty::after { content: none; background: none; }
.slot.is-empty .slot-hint {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--muted);
  word-break: break-all;
}
.slot:not(.is-empty) .slot-hint { display: none; }

/* per-context sizing so an empty slot never collapses the layout */
.page-hero-media.slot.is-empty { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }
.split-media.slot.is-empty { aspect-ratio: 5 / 4; border-radius: var(--r-xl); }
.hero-art .slot.is-empty { border-radius: var(--r-lg); }
.hero-art figure:first-child.slot.is-empty { border-radius: var(--r-xl); }
.dest-media.slot.is-empty { aspect-ratio: 16 / 10; border-radius: 0; border-width: 0 0 2px; }
.country-card .slot.is-empty { padding: 0; border-radius: 12px; border-width: 1.5px; }
.country-card .slot.is-empty::before { content: "\1F5BC"; font-size: 1.05rem; }
.country-card .slot.is-empty .slot-hint { display: none; }

/* closing banner: fall back to the gradient, flag the slot in the corner */
.cta-band > .slot { position: absolute; inset: 0; z-index: -2; }
.cta-band > .slot.is-empty {
  display: block;
  z-index: 2;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
}
.cta-band > .slot.is-empty::before {
  content: "\1F5BC  " attr(data-label);
  position: absolute;
  top: 14px; right: 14px;
  max-width: min(64vw, 320px);
  padding: 7px 13px;
  border: 1px dashed rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  text-align: right;
}
.cta-band > .slot.is-empty .slot-hint {
  position: absolute;
  top: 46px; right: 16px;
  color: rgba(255, 255, 255, .7);
  font-size: .64rem;
}
/* fallback layer sits *under* the photo so both can coexist */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(118deg, var(--ink-800), var(--ink-900) 58%, #0C3A33);
}

/* scale question text */
.scale-q {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1.45;
}
.scale:first-of-type .scale-q { margin-top: 4px; }
.scale + .scale { padding-top: 6px; border-top: 1px solid var(--line); }
.scale-option { padding: 10px 14px; font-size: .9rem; }

.results-head { display: grid; gap: 18px; justify-items: start; margin-bottom: 34px; }

/* sitemap columns */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; }
.sitemap-grid h3 { font-size: 1rem; margin-bottom: 10px; }
.sitemap-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: .9rem; }
.sitemap-grid a { color: var(--text-2); }
.sitemap-grid a:hover { color: var(--accent-ink); }

/* prose blocks (privacy) */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; font-size: 1.35rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; color: var(--text-2); }
.prose li { margin-bottom: 6px; }
.prose p { color: var(--text-2); }

/* current section highlighting */
.nav-drop.is-here > button { color: var(--ink-900); background: rgba(18, 198, 160, .16); font-weight: 650; }
.nav-panel a.is-current { background: var(--bg-tint); }
.nav-panel a.is-current b { color: var(--mint-dark); }

/* empty destination-card media: keep the title readable over the placeholder */
.dest-media.slot.is-empty { position: relative; }
.dest-media.slot.is-empty .dest-title { position: static; margin-top: 8px; color: var(--text); font-size: 1.15rem; }
.dest-media.slot.is-empty .dest-count { position: static; justify-self: center; margin-bottom: 4px; }
.dest-media.slot.is-empty::before { order: -1; }


/* ---------- 20. Back navigation ----------------------------------------- */
/* The old top-left text link was easy to miss. This is a real button, and it
   is repeated at the foot of every guide where people actually finish reading. */
.backbtn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px 9px 13px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  color: var(--text);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease,
              border-color .2s ease, background .2s ease;
}
.backbtn svg { width: 17px; height: 17px; flex: none; color: var(--mint-dark); transition: transform .2s ease; }
.backbtn:hover { transform: translateX(-3px); box-shadow: var(--shadow-md); border-color: var(--mint); }
.backbtn:hover svg { transform: translateX(-3px); }
.backbtn-text { display: grid; line-height: 1.2; text-align: left; }
.backbtn-text small {
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.backbtn-text b {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 650;
  letter-spacing: -.02em;
}

/* foot-of-page return strip */
.page-return {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: min(100% - (var(--gutter) * 2), var(--max));
  margin: clamp(30px, 5vw, 56px) auto 0;
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--line);
}
.page-return .backbtn { margin-bottom: 0; }
.backbtn-lg { padding: 12px 24px 12px 16px; }
.backbtn-lg svg { width: 19px; height: 19px; }
.backbtn-ghost { background: transparent; box-shadow: none; }
.backbtn-ghost svg { color: var(--muted); }
.backbtn-ghost:hover { transform: translateX(3px); background: var(--surface); }
.backbtn-ghost:hover svg { transform: translateX(3px); }

/* ---------- 21. Decorative layer ---------------------------------------- */
/* Quiet geometry that gives the pages depth without adding a single word. */
.hero { position: relative; overflow-x: hidden; }   /* fallback for very old browsers */
@supports (overflow: clip) {
  /* the decorative circles below extend past the screen edge; clip them so the page never gets wider than the phone */
  .hero { overflow-x: clip; }
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -14%;
  right: -8%;
  width: min(46rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 198, 160, .16), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%;
  bottom: -30%;
  width: min(34rem, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 91, 62, .12), transparent 70%);
  pointer-events: none;
}

/* fine dotted field behind the section that follows the hero */
#destinations { position: relative; }
#destinations::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto auto 0;
  width: 190px; height: 190px;
  margin: -26px 0 0 -34px;
  background-image: radial-gradient(rgba(6, 26, 23, .16) 1.1px, transparent 1.1px);
  background-size: 17px 17px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 72%);
  pointer-events: none;
}

/* accent rule above centred section headings */
.section-head-center .eyebrow-plain { position: relative; padding-bottom: 14px; }
.section-head-center .eyebrow-plain::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  translate: -50% 0;
  width: 46px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mint), var(--amber));
}

/* numbered steps get a connecting line on wide screens */
@media (min-width: 981px) {
  .steps { position: relative; }
  .steps::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 54px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 7px, transparent 7px 16px);
  }
  .steps .info-card { background: var(--surface); }
}

/* subtle top sheen on info cards */
.info-card { position: relative; overflow: hidden; }
.info-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mint), var(--amber) 60%, transparent);
  opacity: .5;
}

/* media corners */
.page-hero-media, .split-media { position: relative; }
.page-hero-media::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -10px; top: -10px;
  width: 64px; height: 64px;
  border-top: 3px solid var(--mint);
  border-left: 3px solid var(--mint);
  border-radius: 14px 0 0 0;
  opacity: .8;
  pointer-events: none;
}

@media (max-width: 720px) {
  .page-return { flex-direction: column; align-items: stretch; }
  .page-return .backbtn { justify-content: center; }
  .page-hero-media::before { display: none; }
}

/* ------------------------------------------------------------- feedback */
/* Shared 1–5 rating row, used by the Contact page feedback card and the
   floating feedback panel injected on every other page. */
.rating { display: flex; gap: 10px; margin: 2px 0 4px; }
.rating-option {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.rating-option input { position: absolute; opacity: 0; pointer-events: none; }
.rating-option:hover { border-color: var(--mint-dark); transform: translateY(-2px); }
.rating-option:has(input:checked) { border-color: var(--mint-dark); background: var(--mint-dark); color: #fff; }
.rating-scale-labels {
  display: flex;
  justify-content: space-between;
  max-width: 260px;
  font-size: .78rem;
  color: var(--muted);
  margin: -2px 0 16px;
}

/* Contact-page feedback card — a single compact block, not a full section
   split, so it reads as a footnote rather than another wall of copy. */
.feedback-box {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(22px, 4vw, 34px);
  text-align: center;
}
.feedback-box .eyebrow { justify-content: center; }
.feedback-box h2 { margin: 6px 0 6px; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.feedback-box > p { margin: 0 auto 20px; max-width: 46ch; color: var(--text-2); }
.feedback-box .rating { justify-content: center; }
.feedback-box .rating-scale-labels { margin-left: auto; margin-right: auto; }
.feedback-box form.contact-form { max-width: 420px; margin: 0 auto; text-align: left; gap: 14px; }
.feedback-box .btn { justify-self: center; }
/* Desktop: trade height for width — rating + submit sit in a narrower left
   column, the optional note takes a taller right column, instead of one
   long single-column stack. */
@media (min-width: 760px) {
  .feedback-box { max-width: 800px; }
  .feedback-box form.feedback-grid {
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas: "rating message" "bottom message";
    column-gap: 32px;
    row-gap: 18px;
    align-items: start;
    text-align: left;
  }
  .feedback-box .feedback-rating { grid-area: rating; }
  .feedback-box .feedback-message { grid-area: message; display: flex; flex-direction: column; height: 100%; }
  .feedback-box .feedback-message textarea { flex: 1; min-height: 148px; }
  .feedback-box .feedback-bottom { grid-area: bottom; display: flex; flex-direction: column; gap: 12px; }
  .feedback-box .rating { justify-content: flex-start; }
  .feedback-box .rating-scale-labels { margin-left: 0; margin-right: 0; }
  .feedback-box .btn { justify-self: start; }
}

/* Floating tab — right edge, vertical label, opens the panel on click only.
   No timers, no auto-open; it just sits there until asked for. */
.feedback-tab {
  position: fixed;
  right: 0;
  top: 62%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 16px 9px;
  border: none;
  border-radius: var(--r) 0 0 var(--r);
  background: var(--ink-900);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .16s ease, transform .16s ease, opacity .16s ease;
}
.feedback-tab svg { width: 16px; height: 16px; flex: none; }
.feedback-tab:hover { background: var(--mint-dark); }
.feedback-tab.is-open { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(6px); }

.feedback-panel {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(112%);
  z-index: 125;           /* above the cookie notice (120) and install bar (121): on phones this
                             panel is a bottom sheet and its Send button must never be covered */
  width: min(360px, 92vw);
  max-height: min(78vh, 620px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 22px 20px;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.feedback-panel.is-open { transform: translateY(-50%) translateX(0); }
.feedback-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.feedback-panel-head strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink-900); }
.feedback-panel-close {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.feedback-panel-close:hover { border-color: var(--accent); color: var(--accent-ink); transform: rotate(90deg); }
.feedback-panel-close svg { width: 14px; height: 14px; }
.feedback-panel .form-note { margin-bottom: 14px; }
.feedback-panel form.contact-form { gap: 12px; }
.feedback-panel .rating { gap: 8px; }
.feedback-panel .rating-option { width: 36px; height: 36px; font-size: .85rem; }
.feedback-panel .rating-scale-labels { max-width: 220px; }
.feedback-panel .captcha-box input { max-width: 110px; }

@media (max-width: 640px) {
  .feedback-tab {
    writing-mode: horizontal-tb;
    top: auto; bottom: 18px; right: 14px;
    width: 52px; height: 52px;
    padding: 0;
    border-radius: 50%;
    /* only the icon remains once the label is hidden below, so it must be
       centred on both axes — otherwise flex's default flex-start on the
       (still column) main axis leaves it pinned to the top of the circle */
    justify-content: center;
  }
  .feedback-tab span { display: none; }
  .feedback-tab svg { width: 20px; height: 20px; margin: 0; }
  .feedback-tab.is-open { transform: translateY(0) scale(.8); }
  .feedback-panel { top: auto; bottom: 0; transform: translateX(0) translateY(112%); max-height: 82vh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-right: 1px solid var(--line); border-top: none; }
  .feedback-panel.is-open { transform: translateX(0) translateY(0); }
}

/* Tab fades away after "No thanks" on the feedback nudge (see site.js) */
.feedback-tab.is-leaving { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .feedback-tab, .feedback-panel, .feedback-panel-close { transition: none; }
}

/* Small one-time nudge shown after someone closes the feedback panel without
   sending it. Shows once ever (tracked in localStorage) — never re-appears
   after it has been shown, whichever button the person taps. */
.feedback-nudge {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 62;
  width: min(300px, 88vw);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 16px 18px;
  background: var(--ink-900);
  color: var(--on-dark);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.feedback-nudge.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.feedback-nudge p { margin: 0; font-size: .85rem; color: var(--on-dark-muted); }
.feedback-nudge-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.feedback-nudge-actions button { font-size: .8rem; }
.feedback-nudge .btn { background: #fff; color: var(--ink-900); box-shadow: none; padding: 7px 14px; }
.feedback-nudge .btn:hover { background: var(--mint); box-shadow: none; }
.feedback-nudge-dismiss {
  background: none; border: none; color: var(--on-dark-muted); font-weight: 600;
  cursor: pointer; padding: 0; text-align: left;
}
.feedback-nudge-dismiss:hover { color: var(--on-dark); }
.feedback-nudge-close {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--on-dark);
  cursor: pointer;
}
.feedback-nudge-close svg { width: 12px; height: 12px; }

@media (prefers-reduced-motion: reduce) { .feedback-nudge { transition: none; } }

/* ------------------------------------------------ custom install banner */
/* Replaces the browser's automatic add-to-home-screen banner (which offers
   no real way to say "no thanks") with a slim, dismissible bar of our own. */
.install-banner {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 18px;
  margin: 0 auto;
  max-width: 560px;
  z-index: 121;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 20px;
  background: var(--ink-900);
  color: var(--on-dark);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  animation: rise .4s cubic-bezier(.2,.8,.3,1) both;
}
.install-banner-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; }
.install-banner-text { flex: 1 1 auto; min-width: 0; }
.install-banner-text strong { display: block; font-size: .88rem; }
.install-banner-text p { margin: 2px 0 0; font-size: .78rem; color: var(--on-dark-muted); }
.install-banner-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.install-banner .btn { background: #fff; color: var(--ink-900); box-shadow: none; }
.install-banner .btn:hover { background: var(--mint); color: var(--ink-900); box-shadow: none; }
.install-banner-not-now {
  background: none; border: none; color: var(--mint); font-size: .8rem; font-weight: 600;
  cursor: pointer; padding: 6px 2px; white-space: nowrap;
}
.install-banner-not-now:hover { color: var(--on-dark); }

@media (max-width: 640px) {
  .install-banner { flex-wrap: wrap; }
  .install-banner-text { order: 1; flex-basis: 100%; }
  .install-banner-icon { order: 0; }
  .install-banner-actions { order: 2; flex-basis: 100%; justify-content: flex-end; }
}

/* ---------- 22. Emoji cues (calm by default, a few spotlights) ------------- */

/* 22.1 emoji images (Noto Color Emoji, bundled in the img/emojis folder) keyed by data-k */
[data-k="fees"] { --img: url(img/emojis/1f4b0.png); }
[data-k="living"] { --img: url(img/emojis/1f3e0.png); }
[data-k="lang"] { --img: url(img/emojis/1f5e3.png); }
[data-k="req"] { --img: url(img/emojis/1f4cb.png); }
[data-k="format"] { --img: url(img/emojis/1f4dd.png); }
[data-k="time"] { --img: url(img/emojis/23f1.png); }
[data-k="score"] { --img: url(img/emojis/1f3af.png); }
[data-k="valid"] { --img: url(img/emojis/1f4c6.png); }
[data-k="entry"] { --img: url(img/emojis/1f393.png); }
[data-k="period"] { --img: url(img/emojis/1f4c5.png); }
[data-k="visa"] { --img: url(img/emojis/2708.png); }
[data-k="exams"] { --img: url(img/emojis/270f.png); }
[data-k="body"] { --img: url(img/emojis/1f3db.png); }
[data-k="place"] { --img: url(img/emojis/1f4cd.png); }
[data-k="math"] { --img: url(img/emojis/1f9ee.png); }
[data-k="reason"] { --img: url(img/emojis/1f9e0.png); }
[data-k="logic"] { --img: url(img/emojis/1f9e9.png); }
[data-k="readgk"] { --img: url(img/emojis/1f4da.png); }
[data-k="bio"] { --img: url(img/emojis/1f9ec.png); }
[data-k="chem"] { --img: url(img/emojis/1f9ea.png); }
[data-k="phys"] { --img: url(img/emojis/269b.png); }
[data-k="listen"] { --img: url(img/emojis/1f3a7.png); }
[data-k="read"] { --img: url(img/emojis/1f4d6.png); }
[data-k="write"] { --img: url(img/emojis/270d.png); }
[data-k="speak"] { --img: url(img/emojis/1f3a4.png); }
.fact:nth-child(4n+1), .data-table tr:nth-child(5n+1) { --c-bg: rgba(18,198,160,.15);  --c-glow: rgba(18,198,160,.16); }
.fact:nth-child(4n+2), .data-table tr:nth-child(5n+2) { --c-bg: rgba(255,194,75,.28);  --c-glow: rgba(255,194,75,.20); }
.fact:nth-child(4n+3), .data-table tr:nth-child(5n+3) { --c-bg: rgba(255,91,62,.14);   --c-glow: rgba(255,91,62,.12); }
.fact:nth-child(4n+4), .data-table tr:nth-child(5n+4) { --c-bg: rgba(27,74,66,.12);    --c-glow: rgba(27,74,66,.10); }
.data-table tr:nth-child(5n+5) { --c-bg: rgba(107,79,216,.13); --c-glow: rgba(107,79,216,.10); }

/* 22.2 fact cards: plain at rest, gradient + lift on hover */
.facts { gap: 14px; overflow: visible; background: none; border: 0; }
.fact {
  position: relative; isolation: isolate;
  padding: clamp(18px,2vw,24px); padding-right: 74px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease, border-color .26s ease;
}
.fact::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(20rem 10rem at 100% 0, var(--c-glow, rgba(18,198,160,.14)), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.fact:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.fact:hover::after { opacity: 1; }
.fact[data-k]::before, .data-table th[data-k]::before {
  content: ""; position: absolute;
  width: 42px; height: 42px; border-radius: 14px;
  background: var(--img) center / 25px 25px no-repeat, var(--c-bg);
  transition: transform .26s ease; pointer-events: none;
}
.fact[data-k]::before { top: 16px; right: 16px; }
.fact:hover::before, .data-table tr:hover th[data-k]::before { transform: scale(1.1) rotate(-6deg); }

/* 22.3 detail table: emoji chip + gradient sweep on hover */
.data-table th, .data-table td { transition: background .25s ease; }
.data-table th[data-k] { position: relative; padding-left: 84px; }
.data-table th[data-k]::before { left: 22px; top: 12px; }
.data-table tr:hover th, .data-table tr:hover td { background: transparent; }
.data-table tr:hover { background: linear-gradient(90deg, var(--c-glow, rgba(18,198,160,.12)), transparent 60%); }

/* 22.4 info cards (exams, about, contact): emoji chip, gradient on hover */
.info-icon { width: 46px; height: 46px; transition: transform .26s ease, background .26s ease; }
.info-icon img { display: block; width: 26px; height: 26px; }
.info-card { transition: transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s ease; }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); background: linear-gradient(160deg, rgba(18,198,160,.10), transparent 55%), var(--surface); }
.info-card:hover .info-icon { transform: scale(1.1) rotate(-6deg); background: linear-gradient(140deg, rgba(18,198,160,.34), rgba(255,194,75,.30)); }

/* 22.5 spotlights: the only attention-grabbers on the site */
/* (b) the coral call-to-action buttons get an occasional light sweep, on every device */
.btn-accent { position: relative; overflow: hidden; isolation: isolate; }
.btn-accent::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; z-index: -1; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); animation: fs-sheen 5s ease-in-out 1.5s infinite;
}
@keyframes fs-sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }

@media (max-width: 980px) { .facts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) {
  .facts { grid-template-columns: 1fr; gap: 12px; }
  .data-table tr { padding: 14px 0 16px; }
  .data-table th, .data-table td { padding-left: 20px; padding-right: 20px; }
  .data-table td { padding-top: 0; padding-bottom: 0; }
  .data-table th[data-k] { padding-left: 74px; min-height: 42px; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; margin-bottom: 2px; }
  .data-table th[data-k]::before { left: 20px; top: 0; }
  .data-table th[data-k] ~ td { padding-left: 74px; }
}
@media (hover: none) { .info-card:active, .fact:active { transform: scale(.985); } }
@media (prefers-reduced-motion: reduce) { .btn-accent::after { animation: none; } }
@media print { .fact::before, .data-table th::before { display: none; } }

/* ---------- 23. Footer strip + YÖK notice accent -------------------------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--mint), var(--amber), var(--accent));
}
.notice { position: relative; overflow: hidden; }
.notice::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: linear-gradient(180deg, var(--mint), var(--amber));
}
.notice::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18,198,160,.16), transparent 42%);
}
.notice > * { position: relative; z-index: 1; }
.notice-icon { box-sizing: content-box; padding: 7px; border-radius: 50%; background: rgba(18,198,160,.14); }

/* numbered prep cards: number on the left, emoji chip on the right, one tidy row */
.step { position: relative; }
.step > .info-icon { position: absolute; top: 20px; right: 20px; margin: 0; }
@media (max-width: 720px) { .step > .info-icon { top: 16px; right: 16px; } }