/* ============================================================
   ITU RSM — design system
   dark-first, signalling-inspired: navy night, signal blue,
   amber aspect lights, moving rails.
   ============================================================ */

:root{
  /* brand */
  --navy:#070F1C; --navy-700:#132A4A; --navy-500:#1E3F6B;
  --blue:#3B82F6; --blue-deep:#1D4ED8; --cyan:#22D3EE;
  --amber:#F5A524; --green:#34D399; --red:#F2545B;

  /* surfaces (dark is the default) */
  --bg:#070F1C; --bg-2:#0B1728;
  --surface:rgba(255,255,255,.045); --surface-solid:#0F1E33;
  --surface-2:#0C1A2C;
  --fg:#EAF2FF; --fg-muted:#93A7C4; --border:rgba(255,255,255,.10);
  --ring:rgba(59,130,246,.55);

  --logo-ink:#EAF2FF; --logo-body:#0B1728;

  --radius:18px; --radius-sm:10px; --radius-lg:28px;
  --shadow-1:0 1px 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 24px 60px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(59,130,246,.35),0 18px 50px rgba(29,78,216,.35);
  --maxw:1220px;

  --ff-display:"Sora","Segoe UI",system-ui,sans-serif;
  --ff-body:"Inter","Segoe UI",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --step:clamp(1rem,.96rem + .22vw,1.08rem);
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg:#F4F7FC; --bg-2:#EAF0F9;
  --surface:rgba(16,32,56,.035); --surface-solid:#FFFFFF; --surface-2:#E9F0FA;
  --fg:#0B1728; --fg-muted:#51657F; --border:rgba(11,23,40,.12);
  --logo-ink:#132A4A; --logo-body:#FFFFFF;
  --shadow-1:0 1px 2px rgba(15,23,42,.05),0 10px 24px rgba(15,23,42,.07);
  --shadow-2:0 26px 60px rgba(17,34,62,.16);
  --glow:0 0 0 1px rgba(59,130,246,.25),0 18px 44px rgba(29,78,216,.18);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--ff-body);
  font-size:var(--step);line-height:1.68;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ambient light behind everything */
body::before{
  content:"";position:fixed;inset:-20vh -10vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(48vw 40vw at 78% -6%,rgba(59,130,246,.30),transparent 62%),
    radial-gradient(40vw 34vw at 6% 8%,rgba(34,211,238,.16),transparent 60%),
    radial-gradient(46vw 40vw at 50% 108%,rgba(245,165,36,.12),transparent 62%);
  filter:saturate(1.1);
}
:root[data-theme="light"] body::before{opacity:.5}
/* faint engineering grid */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(70% 60% at 50% 30%,#000 30%,transparent 100%);
}

h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.08;letter-spacing:-.03em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,1.4rem + 5vw,5.4rem);font-weight:700}
h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.2rem);font-weight:650}
h3{font-size:clamp(1.12rem,1rem + .55vw,1.38rem);font-weight:620;letter-spacing:-.015em}
p{margin:0 0 1rem}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
img{display:block}
::selection{background:rgba(59,130,246,.35);color:#fff}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
.section{padding:clamp(3.5rem,8vw,7.5rem) 0;position:relative}
.section--tint{background:linear-gradient(180deg,transparent,var(--bg-2) 18%,var(--bg-2) 82%,transparent)}
.lede{font-size:clamp(1.05rem,1rem + .5vw,1.28rem);color:var(--fg-muted);max-width:62ch}

/* eyebrow with a blinking signal dot */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ff-mono);
  font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin:0 0 1rem;
}
.eyebrow::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px rgba(245,165,36,.16),0 0 14px rgba(245,165,36,.9);
  animation:aspect 2.6s ease-in-out infinite;
}
@keyframes aspect{0%,100%{opacity:1}50%{opacity:.25}}

/* gradient headline accent */
.grad{
  background:linear-gradient(100deg,var(--cyan),var(--blue) 42%,#A78BFA 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* language switching */
[lang]:not(html){display:none}
html[data-lang="en"] [lang="en"],html[data-lang="tr"] [lang="tr"]{display:revert}

/* ============================ header ============================ */
.site-header{position:sticky;top:0;z-index:70;transition:background .3s,box-shadow .3s,border-color .3s}
.site-header::before{
  content:"";position:absolute;inset:0;backdrop-filter:blur(14px) saturate(1.5);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  opacity:0;transition:opacity .3s;border-bottom:1px solid transparent;
}
.site-header.is-stuck::before{opacity:1;border-bottom-color:var(--border)}
.site-header__bar{position:relative;display:flex;align-items:center;gap:1.25rem;min-height:78px;transition:min-height .3s}
.site-header.is-stuck .site-header__bar{min-height:64px}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;z-index:2;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--amber));box-shadow:0 0 12px rgba(59,130,246,.8)}

.brand{display:flex;align-items:center;gap:.75rem;color:var(--fg);font-family:var(--ff-display);font-weight:680;letter-spacing:-.015em}
.brand:hover{text-decoration:none}
.brand__mark{width:46px;height:46px;flex:0 0 auto;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand__mark{transform:translateY(-2px) scale(1.04)}
.brand__txt{display:flex;flex-direction:column;line-height:1.12}
.brand__txt b{font-size:1.04rem}
.brand__txt span{font-size:.7rem;color:var(--fg-muted);font-weight:500;letter-spacing:.06em}

.nav{margin-left:auto;display:flex;align-items:center;gap:.1rem}
.nav a{position:relative;padding:.55rem .78rem;border-radius:999px;color:var(--fg-muted);font-size:.92rem;font-weight:500;transition:color .2s}
.nav a:hover{color:var(--fg);text-decoration:none}
.nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:.28rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue));transition:left .25s,right .25s}
.nav a:hover::after{left:.78rem;right:.78rem}
.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]::after{left:.78rem;right:.78rem}

.tools{display:flex;align-items:center;gap:.4rem;margin-left:.7rem}
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.35rem;border-radius:999px;border:1px solid transparent;font-weight:600;
  font-size:.95rem;cursor:pointer;font-family:var(--ff-body);overflow:hidden;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,border-color .25s;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:linear-gradient(100deg,var(--blue-deep),var(--blue) 55%,var(--cyan));color:#fff;box-shadow:var(--glow)}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45),transparent 80%);
  transform:translateX(-120%);transition:transform .7s}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--ghost{background:var(--surface);color:var(--fg);border-color:var(--border);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--border));background:color-mix(in srgb,var(--blue) 12%,transparent)}
.btn--sm{padding:.42rem .8rem;font-size:.82rem;font-family:var(--ff-mono);letter-spacing:.06em}
.icon-btn{width:38px;height:38px;padding:0;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.icon-btn:hover{border-color:var(--blue);color:var(--blue)}
.nav-toggle{display:none}

/* ============================ hero ============================ */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__inner{position:relative;z-index:3;padding:clamp(5rem,12vh,9rem) 0 clamp(3rem,7vh,5rem)}

/* receding rails, drawn in CSS perspective, sleepers in motion */
.rails{position:absolute;inset:auto 0 0;height:66%;z-index:1;pointer-events:none;
  perspective:340px;perspective-origin:50% 0%;
  mask-image:linear-gradient(to top,#000 42%,transparent 96%);}
.rails__plane{position:absolute;inset:-60% -30% -40%;transform:rotateX(74deg);transform-style:preserve-3d;
  background:
    repeating-linear-gradient(90deg,transparent 0 118px,rgba(147,180,230,.5) 118px 124px,transparent 124px 242px);
  opacity:.85;
}
.rails__ties{position:absolute;inset:-60% -30% -40%;transform:rotateX(74deg);
  background:repeating-linear-gradient(0deg,rgba(147,180,230,.42) 0 7px,transparent 7px 62px);
  animation:ties 1.9s linear infinite;
}
@keyframes ties{to{background-position:0 62px}}
.hero__glow{position:absolute;left:50%;bottom:16%;width:min(60vw,720px);aspect-ratio:1;translate:-50% 0;z-index:2;
  background:radial-gradient(closest-side,rgba(59,130,246,.42),rgba(34,211,238,.12) 55%,transparent 72%);
  filter:blur(8px);animation:pulse 6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.75;transform:translate(-50%,0) scale(1)}50%{opacity:1;transform:translate(-50%,-2%) scale(1.06)}}

.hero h1{max-width:16ch;margin-bottom:1.2rem}
.hero .lede{max-width:56ch;color:var(--fg-muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem}

/* rotating keyword in the headline */
/* one word at a time: the outgoing word must be gone before the next fades in,
   otherwise two gradient words blend into an unreadable smear */
.rotator{display:inline-grid;vertical-align:bottom}
.rotator > span{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(.3em);
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s}
.rotator > span.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .45s ease .3s,transform .45s cubic-bezier(.2,.8,.2,1) .3s,visibility 0s linear .3s}

/* stats strip */
.hero__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin-top:clamp(2.5rem,6vh,4rem);
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;z-index:3}
.stat{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(8px);padding:1.25rem 1.35rem;transition:background .3s}
.stat:hover{background:color-mix(in srgb,var(--blue) 14%,var(--bg))}
.stat b{display:block;font-family:var(--ff-display);font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem);line-height:1;letter-spacing:-.03em;
  background:linear-gradient(180deg,var(--fg),color-mix(in srgb,var(--fg) 45%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.82rem;color:var(--fg-muted)}

.scrollcue{position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;z-index:4;font-family:var(--ff-mono);
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-muted);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scrollcue::after{content:"";width:1px;height:38px;background:linear-gradient(var(--blue),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ============================ marquee ============================ */
.marquee{position:relative;overflow:hidden;border-block:1px solid var(--border);padding:.85rem 0;
  background:color-mix(in srgb,var(--bg-2) 70%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:2.6rem;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--ff-mono);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);white-space:nowrap;display:flex;align-items:center;gap:2.6rem}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.7}

/* ============================ page header ============================ */
.pagehead{position:relative;padding:clamp(4rem,10vw,7rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 100% at 20% 0%,rgba(59,130,246,.22),transparent 70%)}
.pagehead h1{font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem);margin-bottom:.5rem}
.pagehead p{color:var(--fg-muted);margin:0;max-width:62ch;font-size:1.06rem}
.crumbs{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:1rem}
.crumbs a{color:var(--fg-muted)}

/* ============================ cards ============================ */
.grid{display:grid;gap:1.15rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.6rem;backdrop-filter:blur(10px);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s;
}
/* cursor spotlight (x/y set from JS) */
.card::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(59,130,246,.22),transparent 65%);
}
.card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--blue) 45%,var(--border));box-shadow:var(--shadow-2)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.45rem}
.card p{color:var(--fg-muted);margin-bottom:0}
.card--link{display:block;color:inherit}
.card--link:hover{text-decoration:none}
.card--feature{background:linear-gradient(150deg,color-mix(in srgb,var(--blue) 22%,transparent),transparent 60%),var(--surface)}

/* numbered tag */
.tag{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:1.7rem;padding:0 .55rem;
  border-radius:999px;font-family:var(--ff-mono);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 32%,transparent);margin-bottom:.9rem}

/* ============================ tables ============================ */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);backdrop-filter:blur(8px)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--border)}
th{position:sticky;top:64px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);
  font-family:var(--ff-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted);z-index:2}
td:first-child{font-family:var(--ff-mono);font-size:.84rem;color:var(--cyan);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s}
tbody tr:hover{background:color-mix(in srgb,var(--blue) 10%,transparent)}
/* a course code that actually leads somewhere must look different from one that does not */
td a{color:var(--cyan);white-space:nowrap;border-bottom:1px solid color-mix(in srgb,var(--cyan) 45%,transparent)}
td a:hover{text-decoration:none;color:var(--fg);border-bottom-color:currentColor}

/* ============================ lists ============================ */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.6rem;margin-bottom:.65rem;color:var(--fg-muted)}
.ticks li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.people{list-style:none;padding:0;margin:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.people li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:.93rem;transition:.25s}
.people li:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--border));transform:translateX(4px)}
.people li > b{display:block;padding:.7rem 1rem;color:var(--fg-muted);font-weight:500}
.people li > a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.7rem 1rem;color:var(--fg)}
.people li > a:hover{text-decoration:none;color:var(--blue)}
.people .ext{font-size:.9rem;color:var(--fg-muted);opacity:0;transform:translate(-4px,4px);transition:.25s}
.people li:hover .ext{opacity:1;transform:none;color:var(--blue)}
.people-note{margin-top:1.2rem;font-size:.84rem;color:var(--fg-muted)}

/* ============================ timeline ============================ */
.feed{list-style:none;padding:0;margin:0;position:relative}
.feed::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(var(--blue),color-mix(in srgb,var(--blue) 10%,transparent))}
.feed li{position:relative;padding:0 0 2rem 2.4rem}
.feed li::before{content:"";position:absolute;left:0;top:.5em;width:16px;height:16px;border-radius:50%;
  background:var(--bg);border:2px solid var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
.feed time{font-family:var(--ff-mono);font-size:.74rem;font-weight:600;color:var(--amber);letter-spacing:.14em;text-transform:uppercase}
.feed h3{margin:.3rem 0 .35rem;font-size:1.1rem}
.feed p{color:var(--fg-muted);margin:0}

/* ============================ cta ============================ */
.cta{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(2.4rem,6vw,4.2rem);text-align:center;
  border:1px solid var(--border);background:linear-gradient(140deg,color-mix(in srgb,var(--blue) 26%,transparent),transparent 55%),var(--surface-2)}
.cta::after{content:"";position:absolute;inset:auto -10% -60% -10%;height:70%;
  background:radial-gradient(closest-side,rgba(59,130,246,.35),transparent 70%);filter:blur(10px)}
.cta > *{position:relative;z-index:1}
.cta p{color:var(--fg-muted);max-width:58ch;margin-inline:auto}

/* ============================ footer ============================ */
.site-footer{--logo-ink:var(--fg);position:relative;border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--bg-2) 80%,transparent);padding:3.6rem 0 1.8rem;margin-top:2rem}
.site-footer h4{color:var(--fg);font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 .9rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.45rem;font-size:.92rem}
.site-footer a{color:var(--fg-muted)}
.site-footer a:hover{color:var(--fg)}
.foot-grid{display:grid;gap:2.4rem 2rem;grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:start}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-bottom{margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:.6rem;
  justify-content:space-between;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.1em;color:var(--fg-muted)}

/* ============================ motion ============================ */
.reveal{opacity:0;transform:translateY(26px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.is-in{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .rails__ties,.marquee__track,.eyebrow::before,.hero__glow,.scrollcue::after{animation:none}
}

/* ============================ responsive ============================ */
@media (max-width:980px){
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:78px 0 auto 0;flex-direction:column;align-items:stretch;gap:.2rem;
    background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);padding:.8rem 1.25rem 1.4rem;display:none;box-shadow:var(--shadow-2)}
  .nav.is-open{display:flex}
  .nav a{padding:.8rem .6rem;font-size:1rem}
  .tools{margin-left:auto}
  th{top:0}
}
@media (max-width:520px){
  .brand__txt span{display:none}
  .hero{min-height:88svh}
}