/*
Öğrenci Nerede Yer? — "Gece Servisi" (Night Service)
─────────────────────────────────────────────────────────────────
Aesthetic: a late-night neon street-food map. Warm near-black canvas,
brand red glowing like a live map pin, amber like restaurant light on
the street. Editorial-tech: Fraunces display + Nunito body + monospace
HUD labels. Glassmorphism, gradient mesh, grain, pulsing pins.
One stylesheet for the whole site. The landing (index.html) uses the
rich section classes; the legal/404 pages reuse the shared chrome
(.masthead, .article, .section-block, .notice, .steps, .colophon)
and reskin automatically.
*/
/* ───────────────────────── TOKENS ───────────────────────── */
:root {
/* surfaces — warm near-black, no cold blue drift */
--bg: #0C0A0B;
--bg-2: #100D0F;
--elev: #151113;
--elev-2: #1C1719;
--glass: rgba(255, 255, 255, 0.045);
--glass-2: rgba(255, 255, 255, 0.07);
--line: rgba(255, 255, 255, 0.09);
--line-2: rgba(255, 255, 255, 0.16);
/* type */
--ink: #F6F0EA; /* warm white */
--ink-soft: #CBC2BB;
--ink-mut: #9A908A;
--ink-dim: #6E645F;
/* brand red — split: graphics vs. AA-safe foreground text */
--red: #E23744; /* graphics / fills */
--red-text: #FF5E6B; /* foreground text + links on dark (AA ≥4.5) */
--red-deep: #B8252F;
--red-glow: rgba(255, 80, 95, 0.55);
/* brand amber — split likewise */
--amber: #F5A623; /* graphics / fills */
--amber-text: #FFC24D; /* foreground text on dark */
--amber-deep: #C77B00;
--amber-glow: rgba(245, 166, 35, 0.50);
/* support */
--mint: #38D6A6; /* map route accent only */
--violet: #9B8CFF; /* sparse mockup accent */
--radius: 18px;
--radius-sm: 12px;
--radius-lg: 28px;
--col: 760px;
--wide: 1180px;
--shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 50px -20px rgba(0,0,0,.7);
--shadow-lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 70px -24px rgba(0,0,0,.8);
--ease: cubic-bezier(.22, 1, .36, 1);
--spring: cubic-bezier(.5, 1.5, .4, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.65;
color: var(--ink);
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
position: relative;
}
/* Atmosphere: gradient-mesh glow + faint street-grid dots, fixed behind all */
body::before {
content: "";
position: fixed; inset: 0; z-index: -2;
pointer-events: none;
background:
radial-gradient(60vw 50vw at 8% -6%, rgba(226,55,68,.20), transparent 60%),
radial-gradient(55vw 50vw at 102% 8%, rgba(245,166,35,.13), transparent 58%),
radial-gradient(70vw 60vw at 78% 108%, rgba(226,55,68,.10), transparent 60%),
var(--bg);
}
body::after {
content: "";
position: fixed; inset: 0; z-index: -1;
pointer-events: none; opacity: .55;
background-image:
radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
background-size: 34px 34px;
-webkit-mask-image: radial-gradient(120vw 100vh at 50% 30%, #000 30%, transparent 78%);
mask-image: radial-gradient(120vw 100vh at 50% 30%, #000 30%, transparent 78%);
}
/* Film grain — its own layer so it sits above the mesh but below content */
.grain {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; opacity: .045; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
}
::selection { background: var(--red); color: #fff; }
a { color: var(--red-text); text-decoration: none; }
a:hover { color: #fff; }
:focus-visible {
outline: 2px solid var(--amber-text);
outline-offset: 3px;
border-radius: 6px;
}
.container { max-width: var(--col); margin: 0 auto; padding: 0 24px; position: relative; }
.wide { max-width: var(--wide); margin: 0 auto; padding: 0 24px; position: relative; }
.mono {
font-family: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
font-feature-settings: "tnum" 1;
letter-spacing: .02em;
}
/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }
/* ───────────────────────── TICKER (landing top strip) ───────────────────────── */
.ticker {
position: relative; z-index: 2;
border-bottom: 1px solid var(--line);
background: rgba(12,10,11,.6);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
overflow: hidden;
font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-mut);
}
.ticker__track {
display: inline-flex; gap: 0; white-space: nowrap;
padding: 8px 0;
animation: marquee 38s linear infinite;
will-change: transform;
}
.ticker__track span { padding: 0 18px; }
.ticker__track .hot { color: var(--amber-text); }
.ticker:hover .ticker__track { animation-play-state: paused; }
/* legacy thin strip for legal pages */
.issue-line {
background: var(--bg-2);
border-bottom: 1px solid var(--line);
color: var(--ink-mut);
font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
padding: 9px 0; text-align: center;
}
.issue-line .dot { color: var(--red-text); }
/* ───────────────────────── NAVBAR (masthead) ───────────────────────── */
.masthead {
position: sticky; top: 0; z-index: 60;
border-bottom: 1px solid transparent;
transition: border-color .3s, background .3s, backdrop-filter .3s;
}
.masthead.scrolled {
border-bottom-color: var(--line);
background: rgba(11,10,11,.72);
-webkit-backdrop-filter: saturate(140%) blur(16px);
backdrop-filter: saturate(140%) blur(16px);
}
/* Legal/404 pages have no scroll-JS, so their sticky masthead must always
carry the glass backing (otherwise body text scrolls under it). */
.masthead:not(#nav) {
border-bottom-color: var(--line);
background: rgba(11,10,11,.82);
-webkit-backdrop-filter: saturate(140%) blur(16px);
backdrop-filter: saturate(140%) blur(16px);
}
/* Their plain