/* ==========================================================================
   zealcoder — shared stylesheet
   One file, loaded by every page, so the visual system (and any future
   fix) lives in a single place instead of being duplicated per page.
   ========================================================================== */
:root{
  --bg:#050611;
  --bg-elevated:#0b0d1c;
  --bg-card:#10122a;
  /* palette sampled directly from the zealcoder mark (logo) so the site's
     gradient is a true match, not an approximation */
  --cyan:#22d3f5;
  --blue:#2f8cf0;
  --indigo:#6a5cf0;
  --purple:#8b3ef0;
  --magenta:#c144f7;
  --purple-deep:#5a1fc9;
  --text:#eceeff;
  --text-muted:#9295b8;
  --text-faint:#7276a0;
  --line:rgba(150,150,200,0.16);
  --gradient:linear-gradient(120deg, var(--cyan) 0%, var(--blue) 28%, var(--indigo) 55%, var(--purple) 80%, var(--magenta) 100%);
  --gradient-vert:linear-gradient(180deg, var(--cyan), var(--blue) 32%, var(--indigo) 60%, var(--purple) 82%, var(--magenta));

  /* ---- ZealCat design tokens (Sprint 7) ----------------------------------
     Reserved for the future mascot. Nothing renders differently yet — these
     just give every current/future ZealCat placeholder (hero, footer,
     loading screen, assistant, 404) one shared source of truth so dropping
     in the real artwork later is a token/asset swap, not a redesign. */
  --zc-eye-left:var(--purple);   /* left eye, per the character sheet */
  --zc-eye-right:var(--cyan);    /* right eye, per the character sheet */
  --zc-glow-purple:rgba(139,62,240,0.35);
  --zc-glow-cyan:rgba(34,211,245,0.16);
  --zc-glow-purple-strong:rgba(139,62,240,0.5);
  --zc-glow-cyan-strong:rgba(34,211,245,0.5);
  --zc-glass-bg:linear-gradient(160deg, rgba(16,18,42,0.55), rgba(11,13,28,0.32));
  --zc-glass-border:1px dashed rgba(150,150,200,0.3);
  --zc-glass-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  --zc-radius-sm:9px;
  --zc-radius-md:16px;
  --zc-radius-lg:28px;
  /* animation tokens — durations/easing only for now; the idle/blink/hover
     keyframes below are defined and ready but not yet attached to any real
     character art */
  --zc-ease:cubic-bezier(0.22, 1, 0.36, 1);
  --zc-anim-idle:4.5s;
  --zc-anim-breathe:6.2s;
  --zc-anim-blink:4s;
  --zc-anim-hover:0.3s;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  /* Reserve the desktop scrollbar lane before dynamic content arrives so
     fixed UI such as ZealCat never jumps sideways during page transitions. */
  scrollbar-gutter:stable;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
::selection{ background:var(--purple-deep); color:#fff; }
.skip-link{
  position:fixed; top:-60px; left:12px; z-index:100;
  background:var(--bg-elevated); color:var(--text); border:1px solid var(--cyan);
  padding:0.7rem 1.1rem; border-radius:8px; font-family:'JetBrains Mono',monospace;
  font-size:0.82rem; transition:top 0.2s ease;
}
.skip-link:focus{ top:12px; }
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
img{max-width:100%;display:block;}
button{ font:inherit; cursor:pointer; background:none; }

.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cyan);
  display:flex;
  align-items:center;
  gap:0.6rem;
}
.eyebrow::before{ content:""; width:16px;height:1px; background:var(--cyan); display:inline-block; }

h1,h2,h3{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.01em; }

.container{ max-width:1140px; margin:0 auto; padding:0 6vw; position:relative; z-index:1; }

#circuit-bg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0.5; }

.spine{ position:fixed; top:0; left:38px; width:2px; height:100%; background:var(--line); z-index:2; }
.spine-fill{
  position:absolute; top:0;left:0; width:100%; height:0%;
  background:var(--gradient-vert);
  box-shadow:0 0 4px 1px rgba(34,211,245,0.55), 0 0 16px 2px rgba(139,62,240,0.45);
  transition:height 0.15s linear;
}
.spine-node{
  position:absolute; left:50%; transform:translateX(-50%);
  width:9px;height:9px; border-radius:50%;
  background:var(--bg-elevated); border:2px solid var(--text-faint);
  transition:all 0.4s ease; z-index:3;
}
.spine-node.active{
  border-color:var(--cyan); background:var(--gradient);
  box-shadow:0 0 6px 1px rgba(34,211,245,0.7), 0 0 16px 4px rgba(139,62,240,0.5);
}
@media (max-width:880px){ .spine{display:none;} }

nav{
  position:fixed; top:0;left:0;right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 6vw;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(5,6,17,0.9), rgba(5,6,17,0.55) 70%, rgba(5,6,17,0));
}
.brand{ display:flex; align-items:center; gap:0.7rem; font-family:'JetBrains Mono',monospace; font-weight:500; font-size:1.02rem; color:var(--text); }
.brand img{ width:34px;height:34px; border-radius:9px; }
.brand .tag-open{color:var(--purple);}
.brand .tag-close{color:var(--cyan);}
.nav-right{ display:flex; align-items:center; gap:1.6rem; }
.nav-links{ display:flex; gap:1.6rem; font-size:0.86rem; color:var(--text-muted); }
.nav-links a{ transition:color 0.2s; position:relative; padding-bottom:4px; }
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--text); font-weight:600; }
.nav-links a.active::after{
  content:""; position:absolute; left:0;right:0;bottom:-6px; height:3px;
  background:var(--gradient); border-radius:2px;
  box-shadow:0 0 8px var(--zc-glow-purple-strong);
}
.nav-links a:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:3px;
}
.lang-toggle{
  display:flex; align-items:center; font-family:'JetBrains Mono',monospace; font-size:0.76rem;
  border:1px solid var(--line); border-radius:7px; overflow:hidden; color:var(--text-muted);
}
.lang-toggle button{ padding:0.4rem 0.6rem; transition:all 0.2s; }
.lang-toggle button.active{ background:var(--gradient); color:#08090f; font-weight:600; }
.nav-toggle{
  display:none; flex-direction:column; gap:4px; width:22px; padding:6px 0;
}
.nav-toggle span{ height:2px; width:100%; background:var(--text); border-radius:2px; transition:all 0.25s; }
.mobile-panel{
  display:none; position:fixed; top:0; right:0; bottom:0; width:min(78vw,320px); z-index:29;
  background:var(--bg-elevated); border-left:1px solid var(--line);
  padding:6.5rem 2rem 2rem; flex-direction:column; gap:1.6rem;
  transform:translateX(100%); transition:transform 0.3s ease;
}
.mobile-panel.open{ transform:translateX(0); }
.mobile-panel a{ font-size:1.02rem; color:var(--text-muted); }
.mobile-panel a.active{ color:var(--cyan); }
.menu-open{ overflow:hidden; }
.menu-open::after{
  content:""; position:fixed; inset:0; z-index:28;
  background:rgba(2,3,10,.64); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
@media (max-width:960px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .mobile-panel{display:flex;}
}

.hero{
  min-height:min(100vh, 780px); display:flex; flex-direction:column; justify-content:center;
  padding-top:4.5rem; padding-bottom:3rem; position:relative; overflow:hidden;
}
.hero-grid-pattern{
  position:absolute; inset:-10% -6vw; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(150,150,200,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,150,200,0.07) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 85%);
}
.hero-grid{
  display:block;
}
.hero-content{ max-width:900px; animation:heroRise 0.8s ease both; }
.hero-badge{
  position:relative; width:60px; height:60px; margin-bottom:1.7rem;
  display:flex; align-items:center; justify-content:center;
}
.hero-badge .mark-traces{
  position:absolute; top:50%; left:50%; width:220px; height:140px;
  transform:translate(-50%,-50%); opacity:0.45; pointer-events:none;
}
.hero-badge .mark-logo{
  position:relative; width:100%; height:100%; border-radius:50%;
  filter:drop-shadow(0 0 22px rgba(139,62,240,0.5)) drop-shadow(0 0 10px rgba(34,211,245,0.32));
  animation:markPulse 5s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{ filter:drop-shadow(0 0 22px rgba(139,62,240,0.5)) drop-shadow(0 0 10px rgba(34,211,245,0.32)); }
  50%{ filter:drop-shadow(0 0 32px rgba(193,68,247,0.65)) drop-shadow(0 0 16px rgba(34,211,245,0.5)); }
}
.hero h1{ text-align:left; max-width:900px; font-size:clamp(2.35rem, 5.2vw, 4.5rem); line-height:1.04; margin-bottom:1.3rem; }
.hero h1 .grad{
  background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(139,62,240,0.28));
}
.hero-sub{ text-align:left; max-width:680px; margin:0 0 2.2rem; color:var(--text-muted); font-size:1.07rem; }
.hero-eyebrow{ justify-content:flex-start; margin-bottom:1.3rem; }
.hero-actions{ display:flex; justify-content:flex-start; gap:1rem; flex-wrap:wrap; animation:heroRise 0.8s ease 0.1s both; }

.zealcat-slot{
  position:relative; width:100%; max-width:340px; aspect-ratio:1/1;
  border-radius:var(--zc-radius-lg); border:var(--zc-glass-border);
  background:var(--zc-glass-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 20px 60px rgba(5,6,17,0.4), var(--zc-glass-shadow);
  transition:transform 0.35s var(--zc-ease);
  will-change:transform;
}
.zealcat-slot-grid{
  position:absolute; inset:0; opacity:0.55;
  background-image:
    linear-gradient(rgba(150,150,200,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,150,200,0.1) 1px, transparent 1px);
  background-size:24px 24px;
}
.zealcat-slot-glow{
  position:absolute; width:68%; height:68%; border-radius:50%;
  background:radial-gradient(closest-side, var(--zc-glow-purple), var(--zc-glow-cyan) 55%, transparent 75%);
  filter:blur(28px); animation:markPulse 5s ease-in-out infinite;
}
.zealcat-slot-icon{ position:relative; width:42%; height:42%; opacity:0.85; }
.zealcat-slot .zc-art-wrap{ width:80%; height:80%; }
.zealcat-slot-tag{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.08em;
  color:var(--text-faint); padding:0.34rem 0.7rem; border:1px solid var(--line); border-radius:20px;
  background:rgba(5,6,17,0.5); white-space:nowrap;
}

/* ==========================================================================
   ZealCat Design System (Sprint 7)
   Shared, reusable building blocks for every future ZealCat placeholder —
   hero, footer, loading screen, floating assistant, 404. Nothing on the
   site currently depends on these; they exist so a future sprint can drop
   `class="zc-slot zc-slot--md"` (or similar) wherever a new slot is needed
   instead of writing bespoke CSS again. Colors/glow/glass values come from
   the tokens defined in :root above.
   ========================================================================== */
.zc-slot{
  position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
  border:var(--zc-glass-border); background:var(--zc-glass-bg);
  box-shadow:var(--zc-glass-shadow);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.zc-slot--sm{ width:34px; height:34px; border-radius:var(--zc-radius-sm); }
.zc-slot--md{ width:60px; height:60px; border-radius:var(--zc-radius-md); }
.zc-slot--lg{ width:100%; max-width:340px; aspect-ratio:1/1; border-radius:var(--zc-radius-lg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 20px 60px rgba(5,6,17,0.4), var(--zc-glass-shadow); }
.zc-slot-grid{
  position:absolute; inset:0; opacity:0.55;
  background-image:
    linear-gradient(rgba(150,150,200,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,150,200,0.1) 1px, transparent 1px);
  background-size:24px 24px;
}
.zc-slot-glow{
  position:absolute; width:68%; height:68%; border-radius:50%;
  background:radial-gradient(closest-side, var(--zc-glow-purple), var(--zc-glow-cyan) 55%, transparent 75%);
  filter:blur(28px);
}

/* Eye tokens — for whenever the real character art needs two CSS-driven
   glow dots (e.g. an SVG that blinks) instead of a baked-in image. */
.zc-eye-left{ color:var(--zc-eye-left); }
.zc-eye-right{ color:var(--zc-eye-right); }

/* ==========================================================================
   Phase 1 — behavior-driven, not animation-driven (see project notes).
   Only two motions are allowed to run forever, and both are close to
   imperceptible on their own: a tiny breathing scale, and blinking. Every
   other mascot motion below is single-shot — it plays once, for a real
   reason (first visit, landing on a missing page, opening the chat), and
   then the character settles back into the same quiet breathing state.
   Nothing here loops indefinitely except breathe + blink.
   ========================================================================== */

/* The two permanent idle behaviors --------------------------------------- */
@keyframes zcBreathe{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.008); }
}
.zc-anim-breathe{ animation:zcBreathe var(--zc-anim-breathe) ease-in-out infinite; transform-origin:center bottom; }
/* small-icon variant (footer/chat launcher) — kept as its own class name
   for backward compatibility with existing markup; same breathing motion,
   just without a bottom-anchored origin since those icons are centered. */
.zc-anim-idle{ animation:zcBreathe var(--zc-anim-idle) ease-in-out infinite; }

/* Blinking is now triggered from JS at randomized (non-metronomic)
   intervals — see js/site.js — rather than running as a fixed-period CSS
   loop, so it never reads as mechanical on close attention. Each eyelid
   just gets a short one-shot animation when the .zc-blink-now class lands. */
@keyframes zcBlinkOnce{
  0%,100%{ transform:scaleY(0); }
  45%{ transform:scaleY(1); }
}
.zc-eyelid.zc-blink-now{ animation:zcBlinkOnce 0.22s ease-in-out; }

.zc-anim-hover:hover{ animation:zcHoverGlow var(--zc-anim-hover) ease-in-out; }
@keyframes zcHoverGlow{
  0%,100%{ filter:drop-shadow(0 0 12px var(--zc-glow-purple-strong)); }
  50%{ filter:drop-shadow(0 0 22px var(--zc-glow-cyan-strong)); }
}

/* One-shot: hero greeting, once per browser session (js/site.js uses
   sessionStorage). A real pose change — Standing crossfades to the
   official Wave crop and back — never a transform on the same image.
   The two images are stacked in the same box; only opacity moves. */
.zc-pose-wave{
  position:absolute; inset:0; opacity:0; transition:opacity 0.7s ease;
  pointer-events:none;
}
.zc-pose-standing{ transition:opacity 0.7s ease; }
.zc-art-wrap.zc-greeting .zc-pose-wave{ opacity:1; }
.zc-art-wrap.zc-greeting .zc-pose-standing{ opacity:0; }
/* eyelid coordinates are measured against the Standing pose only */
.zc-art-wrap.zc-greeting .zc-eyelid{ display:none; }

/* One-shot acknowledgement glow — shared by the hover-dwell reaction,
   the click/tap reaction, and the chatbot's "reply arrived" beat. Never a
   transform on the body: filter only, so it never implies motion that
   isn't backed by real artwork. */
@keyframes zcAckGlow{
  0%,100%{ filter:drop-shadow(0 0 10px var(--zc-glow-purple-strong)); }
  50%{ filter:drop-shadow(0 0 16px var(--zc-glow-cyan-strong)); }
}
.zc-art.zc-ack-glow{ animation:zcAckGlow 0.8s ease-in-out 1; }

/* One-shot: 404 "looking around for the missing page". Plays once on
   landing, then settles into the same breathe state as everywhere else —
   it does not loop for as long as the visitor stays on the page. */
@keyframes zcSearchTilt{
  0%,100%{ transform:rotate(0deg); }
  18%{ transform:rotate(-4deg); }
  50%{ transform:rotate(0.5deg); }
  72%{ transform:rotate(4deg); }
  90%{ transform:rotate(0deg); }
}
.zc-anim-search-once{ animation:zcSearchTilt 3.4s ease-in-out 1; transform-origin:center bottom; }

@media (prefers-reduced-motion: reduce){
  .zc-pose-wave, .zc-pose-standing{ transition:none; }
  .zc-art.zc-ack-glow{ animation:none; }
}

/* Loader-only motion: the boot screen is on screen for as little as
   350ms (js/loading.js), far shorter than one cycle of the hero's breathing
   loop — so on a fast page load the mascot never visibly moves at all
   before it's removed. This is a dedicated, quicker pulse (~0.9s) so at
   least one full cycle reads even on the shortest visit. Scale only —
   no rotation: a rotating icon on a ~0.9s repeat reads as rocking
   side-to-side rather than a calm pulse. Revisit once real walking/run
   artwork exists instead of animating the static crop harder. */
@keyframes zcLoaderPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}
@keyframes zcLoaderGlow{
  0%,100%{ opacity:0.55; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.1); }
}
.zc-anim-loader{ animation:zcLoaderPulse 0.9s ease-in-out infinite; }
.zc-anim-loader .zc-slot-glow{ animation:zcLoaderGlow 0.9s ease-in-out infinite; }

/* Loading ring — the one place the Character Bible explicitly calls for
   extra motion ("an animated ring or the tail-orb pulse as the loading
   indicator", Section 13). A spinning conic-gradient ring in the two
   brand colors sits just outside the face crop; it never touches or
   distorts the artwork itself, so it adds the "most playful" beat the
   loading screen is allowed without faking any character movement. */
.zc-loader-ring{
  position:absolute; inset:-7px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--purple), var(--cyan), var(--magenta), var(--purple));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation:zcRingSpin var(--zc-ring-dur, 1.1s) linear infinite;
  opacity:0.9; pointer-events:none;
}
@keyframes zcRingSpin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   ZealCat — real artwork (character bible PNGs, alpha-cut)
   Drop-in replacement for the old line-art placeholders. .zc-art-wrap sits
   inside the existing .zealcat-slot/.zc-slot glass panels and just holds
   the official image + two small "eyelid" dots positioned over the
   character's own eyes (coordinates measured directly off the source
   art), so the blink reads as part of the illustration rather than a
   generic overlay. Idle float + hover glow reuse the Sprint 7 tokens
   above; nothing here introduces new timing values except the eyelid
   keyframe, which reuses --zc-anim-blink so every blinking instance
   across the site stays in sync.
   ========================================================================== */
.zc-art-wrap{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.zc-art{ position:relative; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(5,6,17,0.45)); }
.zc-eyelid{
  position:absolute; width:6.4%; height:4.2%; border-radius:50%;
  background:#0b0c14; transform:scaleY(0); transform-origin:center;
  pointer-events:none;
}
.zc-eyelid-l{ left:34.9%; top:28%; }
.zc-eyelid-r{ left:59.7%; top:28.2%; }
/* Small (footer/loader/chat) instances: skip the eyelid dots — at
   34px–60px they'd be sub-pixel — but keep the breathing idle motion. */
.zc-art-wrap--sm .zc-eyelid{ display:none; }

/* Animated ZealCat atlas. A 2x canvas backing buffer is used by
   js/zealcat-pet.js; CSS keeps the visible size stable and lets the browser
   downsample the curved metal edges cleanly on Retina/high-DPI displays. */
.zc-pet-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; filter:drop-shadow(0 9px 20px rgba(5,6,17,.42)); }
.zc-art-wrap.zc-pet-active .zc-art,
.zc-art-wrap.zc-pet-active .zc-eyelid{ display:none; }

@keyframes heroRise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.scroll-cue{
  margin:3.5rem auto 0; width:20px; height:32px; border:1.5px solid var(--text-faint);
  border-radius:12px; position:relative; opacity:0.7;
}
.scroll-cue::before{
  content:""; position:absolute; top:6px; left:50%; width:3px; height:7px; margin-left:-1.5px;
  background:var(--cyan); border-radius:2px; animation:scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(10px); }
  100%{ opacity:0; transform:translateY(0); }
}

@media (max-width:880px){
  .zealcat-slot{ max-width:220px; }
  .hero-badge{ margin:0 auto 1.5rem; }
  .hero-eyebrow{ justify-content:center; }
  .hero h1{ text-align:center; }
  .hero-sub{ text-align:center; margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
}

.page-hero{ padding:9.5rem 0 3.5rem; }
.page-hero .eyebrow{ margin-bottom:1rem; }
.page-hero h1{ font-size:clamp(2rem,4.6vw,3.2rem); max-width:760px; margin-bottom:1.1rem; }
.page-hero p{ color:var(--text-muted); max-width:620px; font-size:1.04rem; }

/* ==========================================================================
   404 (Sprint 10)
   Reuses the hero's own layout pattern (.hero-grid ⇒ .notfound-grid) and its
   exact ZealCat placeholder artwork (.zealcat-slot, built on the Sprint 7
   design tokens) instead of introducing new visuals — same character, same
   glass slot, just a different tag underneath it. Copy/i18n keys (already
   set on notfound.*) are untouched; only the section's structure/CSS changed.
   ========================================================================== */
.notfound-hero{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; }
.notfound-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.notfound-copy{ animation:heroRise 0.8s ease both; }
.notfound-copy .hero-actions{ margin-top:1.6rem; }
.notfound-visual{
  display:flex; align-items:center; justify-content:center;
  animation:heroRise 0.9s ease 0.15s both;
}

@media (max-width:880px){
  .notfound-grid{ grid-template-columns:1fr; }
  .notfound-visual{ order:-1; margin-bottom:0.6rem; }
  .notfound-visual .zealcat-slot{ max-width:220px; margin:0 auto; }
  .notfound-copy .eyebrow{ justify-content:center; }
  .notfound-copy h1{ text-align:center; }
  .notfound-copy p{ text-align:center; margin-left:auto; margin-right:auto; }
  .notfound-copy .hero-actions{ justify-content:center; }
}

.btn{
  font-family:'JetBrains Mono',monospace; font-size:0.85rem; padding:0.85rem 1.5rem;
  border-radius:8px; border:1px solid var(--line); transition:all 0.25s ease;
  display:inline-flex; align-items:center; gap:0.5rem;
}
.btn-primary{
  background:var(--gradient); color:#08090f; font-weight:600; border:none;
  box-shadow:0 8px 24px -8px rgba(139,62,240,0.55);
}
.btn-primary:hover{ filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(139,62,240,0.7); }
.btn-ghost{ color:var(--text); }
.btn-ghost:hover{ background:rgba(150,150,200,0.06); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

section{ padding:5.5rem 0 2rem; }
.section-head{ margin-bottom:3.2rem; display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-top:0.7rem; }
.section-num{ font-family:'JetBrains Mono',monospace; color:var(--text-faint); font-size:0.8rem; }

.about-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:4rem; align-items:start; }
.about-grid p{ color:var(--text-muted); margin-bottom:1.1rem; font-size:1.02rem; }
.about-grid strong{ color:var(--text); font-weight:600; }
.fact-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:12px;
  padding:2rem 2.1rem; position:relative; overflow:hidden;
}
.fact-card::before{ content:""; position:absolute; top:0;left:0;right:0;height:2px; background:var(--gradient); }
.fact-row{ display:flex; justify-content:space-between; padding:0.85rem 0; border-bottom:1px solid var(--line); font-size:0.95rem; gap:1rem; }
.fact-row:last-child{ border-bottom:none; }
.fact-label{ color:var(--text-faint); font-family:'JetBrains Mono',monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; }
.fact-value{ color:var(--text); text-align:right; }
@media (max-width:880px){ .about-grid{grid-template-columns:1fr; gap:2.2rem;} }

.board{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1.4px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
/* Skills board always renders a fixed 6 cells (1 static "Languages" cell + 5
   categories from skills.json) — an even, explicit column count keeps every
   row full, instead of auto-fit leaving a half-empty, placeholder-looking
   last row depending on viewport width. */
#skillsBoard{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:880px){ #skillsBoard{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ #skillsBoard{ grid-template-columns:1fr; } }
.board-cell{ background:var(--bg-card); padding:1.9rem 1.7rem; }
.board-cell h3{
  font-size:0.78rem; font-family:'JetBrains Mono',monospace; text-transform:uppercase;
  letter-spacing:0.08em; color:var(--cyan); margin-bottom:1rem; font-weight:500;
}
.board-cell p{ color:var(--text-muted); font-size:0.9rem; margin-bottom:1rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip{
  font-size:0.82rem; padding:0.36rem 0.72rem; border-radius:6px; border:1px solid var(--line);
  color:var(--text-muted); font-family:'JetBrains Mono',monospace; transition:all 0.2s;
}
.chip:hover{ border-color:var(--purple); color:var(--text); }
button.chip{ cursor:pointer; }
.chip.is-active{ background:var(--gradient); border-color:transparent; color:#08090f; font-weight:600; }
.books-filter{ margin-bottom:1.6rem; }
.books-more-wrap{ display:flex; justify-content:center; margin-top:1.6rem; }
#booksShowMore, #projectsShowMore{
  border-color:var(--purple); background:rgba(139,62,240,0.1); font-weight:600;
  padding:0.8rem 1.7rem; box-shadow:0 0 0 rgba(139,62,240,0); transition:all 0.25s ease;
}
#booksShowMore:hover, #projectsShowMore:hover{
  background:rgba(139,62,240,0.18); border-color:var(--magenta);
  box-shadow:0 6px 20px var(--zc-glow-purple); transform:translateY(-2px);
}

/* ---- Resources: filter chips (scoped to kaynaklar.html's #booksFilter) ---- */
.books-filter .chip{ transition:transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.books-filter .chip:hover{ transform:translateY(-2px); }
.books-filter .chip.is-active{ box-shadow:0 6px 16px -6px rgba(139,62,240,0.6); }
@media (max-width:640px){
  .books-filter{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:0.3rem; scrollbar-width:none;
    mask-image:linear-gradient(90deg, transparent, #000 3%, #000 92%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 3%, #000 92%, transparent);
  }
  .books-filter::-webkit-scrollbar{ display:none; }
  .books-filter .chip{ flex:0 0 auto; }
}

/* ---- Resources: book cards (scoped to #booksGrid so projeler.html's
   .project-card stays untouched) ---- */
#booksGrid.project-grid{ row-gap:1.6rem; }
#booksGrid .project-card{ position:relative; overflow:hidden; }
#booksGrid .project-card::before{
  content:""; position:absolute; top:0;left:0;right:0;height:2px;
  background:var(--gradient); opacity:0; transition:opacity 0.25s ease;
}
#booksGrid .project-card:hover::before{ opacity:1; }
#booksGrid .project-card:hover{ border-color:var(--purple); }
#booksGrid .book-cover{ transition:transform 0.35s ease; }
#booksGrid .project-card:hover .book-cover{ transform:scale(1.03); }
#booksGrid .project-tag{
  display:inline-flex; align-self:flex-start; padding:0.22rem 0.62rem; border-radius:20px;
  border:1px solid var(--line); color:var(--text-faint);
}
#booksGrid .project-card p{ line-height:1.62; }

/* ---- Resources: courses/certificates board (scoped to #coursesBoard so
   yetenekler.html's #skillsBoard cells stay untouched) ---- */
#coursesBoard .board-cell{ transition:background 0.25s ease; }
#coursesBoard .board-cell:hover{ background:var(--bg-elevated); }
#coursesBoard .board-cell h3{ display:flex; align-items:center; gap:0.55rem; }
#coursesBoard .board-cell h3::before{ content:"◆"; color:var(--purple); font-size:0.62rem; }
#coursesBoard .board-cell p{ line-height:1.6; }

.project-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1.3rem; }
.project-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:1.8rem;
  display:flex; flex-direction:column; gap:0.9rem; transition:transform 0.25s ease, border-color 0.25s ease;
}
.project-card:hover{ transform:translateY(-4px); border-color:var(--purple); }
.project-card-body{ display:flex; flex:1; flex-direction:column; gap:0.9rem; }
.project-card-head{ display:flex; align-items:center; justify-content:space-between; gap:0.8rem; }
.project-icon{
  width:38px;height:38px; border-radius:8px; display:flex;align-items:center;justify-content:center;
  background:var(--gradient); font-family:'JetBrains Mono',monospace; font-weight:600; color:#08090f; font-size:0.85rem;
}
.project-icon svg{ width:20px;height:20px; }
.project-card h3{ font-size:1.08rem; }
.project-card p{ color:var(--text-muted); font-size:0.92rem; flex-grow:1; }
.project-evidence{
  display:grid; gap:0.7rem; margin-top:0.1rem; padding:0.9rem;
  border:1px solid rgba(139,62,240,.2); border-radius:9px;
  background:linear-gradient(135deg,rgba(139,62,240,.07),rgba(34,211,245,.035));
}
.project-evidence-row{ display:grid; gap:0.28rem; }
.project-evidence-row>span{
  color:var(--text-faint); font-family:'JetBrains Mono',monospace;
  font-size:0.62rem; letter-spacing:.08em; text-transform:uppercase;
}
.project-evidence-row>strong{ color:var(--text-muted); font-size:0.78rem; line-height:1.55; font-weight:500; }
.project-evidence-tools>div{ display:flex; flex-wrap:wrap; gap:0.35rem; }
.project-evidence-tools b{
  padding:0.22rem 0.42rem; border:1px solid var(--line); border-radius:5px;
  color:var(--cyan); font-family:'JetBrains Mono',monospace; font-size:0.62rem; font-weight:500;
}
.project-evidence-result{ padding-top:0.65rem; border-top:1px solid rgba(255,255,255,.06); }
.project-evidence-result>strong{ color:var(--text); }
.project-link{ font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--cyan); display:inline-flex; align-items:center; gap:0.35rem; }
.project-link:hover{ text-decoration:underline; }
.project-tag{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em; }

.book-cover{
  width:100%; height:190px; object-fit:contain; object-position:center;
  border-radius:8px; background:#f4f5fb; border:1px solid var(--line);
  order:-1; display:block;
}

.project-chart-trigger{
  display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:#f4f5fb; padding:0; cursor:zoom-in; order:-1;
  transition:border-color 0.25s ease, transform 0.25s ease;
}
.project-chart-trigger:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.project-chart-trigger img{ width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; object-position:center; display:block; }
/* .project-media-zoom (the small magnifying-glass affordance) had no CSS at
   all, so its bare <svg> rendered at the browser's default replaced-element
   size (huge, always-on) on every project thumbnail. Scoped it to a small
   hover-only icon with a dark scrim, matching the .chart-lightbox zoom-in
   affordance it's meant to signal. */
.project-media{ position:relative; display:block; overflow:hidden; }
.project-media-zoom{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(5,6,17,0.4); opacity:0; transition:opacity 0.25s ease; pointer-events:none;
}
.project-media-zoom svg{ width:26px; height:26px; color:#fff; }
.project-chart-trigger:hover .project-media-zoom,
.project-chart-trigger:focus-visible .project-media-zoom{ opacity:1; }
.project-chart-caption{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-faint);
  padding:0.5rem 0.7rem; background:var(--bg-elevated); border-top:1px solid var(--line);
}

.chart-lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(5,6,17,0.92);
  display:none; align-items:center; justify-content:center; padding:2rem; cursor:zoom-out;
}
.chart-lightbox.is-open{ display:flex; }
.chart-lightbox img{
  max-width:min(900px,92vw); max-height:88vh; border-radius:10px; background:#f4f5fb;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.chart-lightbox-close{
  position:absolute; top:1.4rem; right:1.6rem; width:40px; height:40px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--line); color:var(--text); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
}

.writing-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:2.4rem;
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
}
.writing-card h3{ font-size:1.2rem; margin-bottom:0.5rem; }
.writing-card p{ color:var(--text-muted); max-width:420px; font-size:0.95rem; }

.contact-wrap{
  text-align:center; max-width:640px; margin:0 auto; position:relative;
  background:linear-gradient(160deg, rgba(16,18,42,0.55), rgba(11,13,28,0.32));
  border:1px solid var(--line); border-radius:22px; padding:3rem 2.6rem;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); overflow:hidden;
  box-shadow:0 20px 60px rgba(5,6,17,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.contact-wrap::before{ content:""; position:absolute; top:0;left:0;right:0;height:2px; background:var(--gradient); }
.contact-wrap h2{ font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:1rem; }
.contact-wrap p{ color:var(--text-muted); margin-bottom:2.2rem; }
.contact-links{ display:flex; justify-content:center; align-items:center; gap:0.85rem; row-gap:1.1rem; margin-bottom:0; flex-wrap:wrap; }
.contact-links .btn-primary{
  flex-basis:100%; max-width:300px; margin:0 auto 0.3rem; justify-content:center;
  padding:1rem 2rem; font-size:0.92rem;
}
.contact-links .btn-ghost{ min-width:140px; justify-content:center; }
.contact-fact{
  display:flex; justify-content:center; gap:2.6rem; flex-wrap:wrap; margin-top:2.6rem;
  padding-top:2.2rem; border-top:1px dashed var(--line);
}
.contact-fact div{ text-align:left; padding-left:0.9rem; border-left:2px solid var(--line); }
.contact-fact div:nth-child(1){ border-left-color:var(--cyan); }
.contact-fact div:nth-child(2){ border-left-color:var(--purple); }
.contact-fact .fact-label{ display:block; margin-bottom:0.3rem; }
.contact-fact .fact-value{ font-size:0.98rem; }
.contact-linkedin{
  margin-top:2rem; padding-top:2rem; border-top:1px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
}
.contact-linkedin p{ color:var(--text-muted); font-size:0.9rem; max-width:420px; margin:0; }
.linkedin-card{
  position:relative; width:min(100%, 430px); overflow:hidden; text-align:left;
  background:linear-gradient(145deg, rgba(19,22,48,.96), rgba(8,10,24,.98));
  border:1px solid rgba(126,139,190,.24); border-radius:16px; padding:1.35rem;
  box-shadow:0 18px 45px rgba(2,4,15,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.linkedin-card-topline{
  position:absolute; inset:0 0 auto; height:2px; background:var(--gradient);
}
.linkedin-card-brand{
  display:flex; align-items:center; color:var(--text); font-size:1.08rem; font-weight:700;
  letter-spacing:-.02em;
}
.linkedin-in{
  display:inline-flex; align-items:center; justify-content:center; margin-left:.12rem;
  width:1.45rem; height:1.45rem; border-radius:4px; background:#0a66c2; color:#fff;
  font-size:.86rem; letter-spacing:-.04em;
}
.linkedin-card-status{
  display:inline-flex; align-items:center; gap:.42rem; margin-left:auto; color:var(--text-muted);
  font:500 .68rem/1 'JetBrains Mono',monospace; letter-spacing:.04em; text-transform:uppercase;
}
.linkedin-card-status > span:first-child{
  width:7px; height:7px; border-radius:50%; background:#42e8b4;
  box-shadow:0 0 10px rgba(66,232,180,.72);
}
.linkedin-card-profile{ display:flex; align-items:center; gap:1rem; margin:1.4rem 0 1.25rem; }
.linkedin-card-avatar{
  flex:0 0 72px; width:72px; height:72px; display:grid; place-items:center; border-radius:18px;
  background:radial-gradient(circle at 30% 20%, rgba(145,55,255,.3), rgba(12,16,34,.92) 70%);
  border:1px solid rgba(111,104,255,.4); box-shadow:0 0 24px rgba(91,75,255,.18);
}
.linkedin-card-avatar img{ width:58px; height:58px; object-fit:contain; }
.linkedin-card-copy{ min-width:0; }
.linkedin-card-copy h2{ font-size:1.12rem; margin:0 0 .35rem; }
.contact-linkedin .linkedin-card-copy p{
  color:var(--text); font-size:.82rem; line-height:1.45; margin:0 0 .38rem;
}
.linkedin-card-location{ color:var(--text-muted); font-size:.77rem; }
.linkedin-card-action{
  min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.72rem .9rem; border:1px solid rgba(62,179,255,.32); border-radius:10px;
  color:var(--text); background:rgba(10,102,194,.1); font-size:.82rem; font-weight:600;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.linkedin-card-action:hover{
  transform:translateY(-2px); border-color:var(--cyan); background:rgba(10,102,194,.18);
}
.linkedin-card-action:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
@media (max-width:480px){
  .contact-wrap{ padding:2.4rem 1.5rem; border-radius:18px; }
  .contact-links .btn-ghost{ flex:1 1 100%; }
  .linkedin-card{ padding:1.1rem; }
  .linkedin-card-status{ font-size:.58rem; }
  .linkedin-card-avatar{ flex-basis:62px; width:62px; height:62px; border-radius:15px; }
  .linkedin-card-avatar img{ width:50px; height:50px; }
}

.home-links{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.3rem; }
.home-link-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:1.8rem;
  transition:transform 0.25s ease, border-color 0.25s ease; display:flex; flex-direction:column; gap:0.7rem;
}
.home-link-card:hover{ transform:translateY(-4px); border-color:var(--purple); }
.home-link-card .section-num{ color:var(--cyan); }
.home-link-card h3{ font-size:1.15rem; }
.home-link-card p{ color:var(--text-muted); font-size:0.92rem; flex-grow:1; }
.home-link-card span.go{ font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--cyan); }

.journal-empty{
  background:var(--bg-card); border:1px dashed var(--line); border-radius:14px;
  padding:2.6rem 2rem; text-align:center; max-width:560px; margin:0 auto;
}
.journal-empty h3{ font-size:1.15rem; margin-bottom:0.6rem; }
.journal-empty p{ color:var(--text-muted); font-size:0.95rem; margin-bottom:1.4rem; }
.journal-empty a{ font-family:'JetBrains Mono',monospace; font-size:0.85rem; color:var(--cyan); }
.journal-empty a:hover{ text-decoration:underline; }

main section:has(> #journalFeed){ counter-reset:journalLog; }
.journal-entry{
  counter-increment:journalLog;
  background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
  padding:2.3rem 2.4rem 2.3rem 2.7rem; margin-bottom:1.8rem; position:relative; overflow:hidden;
  transition:transform 0.25s ease, border-color 0.25s ease;
}
.journal-entry::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--gradient-vert);
}
.journal-entry:hover{ transform:translateY(-3px); border-color:var(--purple); }
.journal-entry-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  padding-bottom:1.1rem; margin-bottom:1.4rem; border-bottom:1px dashed var(--line);
}
.journal-entry-date{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-faint); white-space:nowrap;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:20px; padding:0.3rem 0.75rem;
}
.journal-entry-date::before{ content:"log " counter(journalLog,decimal-leading-zero) " · "; color:var(--purple); }
.journal-entry h3{ font-size:1.12rem; }
.journal-fields{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.8rem 2.4rem; margin-top:1.5rem; }
@media (max-width:700px){ .journal-fields{ grid-template-columns:1fr; gap:1.5rem; } }
.journal-field{ border-left:2px solid var(--line); padding-left:1.05rem; }
.journal-field:nth-child(1){ border-left-color:var(--magenta); }
.journal-field:nth-child(2){ border-left-color:var(--cyan); }
.journal-field:nth-child(3){ border-left-color:var(--purple); }
.journal-field:nth-child(4){ border-left-color:var(--blue); }
.journal-field h4{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:0.55rem;
}
.journal-field p{ color:var(--text-muted); font-size:0.94rem; line-height:1.68; }

.cv-download{
  display:inline-flex; align-items:center; gap:0.5rem; font-family:'JetBrains Mono',monospace;
  font-size:0.8rem; color:var(--text-faint);
}
.cv-download a{ color:var(--cyan); }
.cv-download a:hover{ text-decoration:underline; }

/* ==========================================================================
   Loading screen (Sprint 8)
   Built entirely on the ZealCat Design System tokens/utilities from
   Sprint 7 — the slot, its grid/glow layers, and the idle animation are
   the same pieces later sprints will reuse for the real mascot. Sits above
   everything else, then fades and removes itself once the page (and a
   short minimum-visible window) is ready — see js/loading.js.
   ========================================================================== */
.zc-loader{
  position:fixed; inset:0; z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem;
  background:var(--bg);
  transition:opacity 0.45s ease;
}
.zc-loader-skipped .zc-loader{ display:none !important; }
.zc-loader .zc-slot--md{
  width:132px; height:143px; border-radius:30px;
  border-color:rgba(139,62,240,.32);
  box-shadow:0 20px 55px rgba(0,0,0,.42), 0 0 38px rgba(139,62,240,.18);
}
/* Never flash the legacy face crop while the animated atlas is loading. */
.zc-loader .zc-art{ opacity:0; }
.zc-loader .zc-slot-grid{ background-size:20px 20px; }
.zc-loader .zc-loader-ring{ border-radius:34px; }
.zc-loader.is-hidden{ opacity:0; pointer-events:none; }
.zc-loader-text{
  font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-faint); display:flex; align-items:center; gap:0.15rem;
}
.zc-loader-dot{ opacity:0.25; animation:zcDotPulse 1.3s ease-in-out infinite; }
.zc-loader-dot:nth-child(2){ animation-delay:0.15s; }
.zc-loader-dot:nth-child(3){ animation-delay:0.3s; }
@keyframes zcDotPulse{ 0%,100%{ opacity:0.25; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .zc-loader{ transition:none; }
}
@media (max-width:480px){
  .zc-loader .zc-slot--md{ width:116px; height:126px; border-radius:27px; }
  .zc-loader .zc-loader-ring{ border-radius:31px; }
}

footer{
  border-top:1px solid var(--line); padding:2.4rem 6vw 2.2rem; display:flex; justify-content:space-between;
  align-items:center; color:var(--text-faint); font-family:'JetBrains Mono',monospace; font-size:0.78rem;
  position:relative; z-index:1; flex-wrap:wrap; gap:1rem;
  background:linear-gradient(180deg, rgba(139,62,240,0.035), transparent 65%);
}
footer .foot-brand{ display:flex; align-items:center; gap:0.6rem; transition:opacity 0.2s ease; }
footer .foot-brand:hover{ opacity:0.82; }
footer .foot-brand img{ width:22px;height:22px;border-radius:6px; }
/* Miniature ZealCat mascot, real artwork (was a dashed placeholder box).
   .foot-loc-group wraps the mascot alongside — not inside — the data-i18n
   location span, since data-i18n overwrites textContent on every language
   toggle; nesting the image inside it would wipe it out on EN/TR switch. */
.foot-loc-group{ display:inline-flex; align-items:center; gap:0.7rem; }
.footer-mascot{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  border:var(--zc-glass-border);
  background:var(--zc-glass-bg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  padding:2px;
}
@media (max-width:600px){
  .container{padding:0 5.5vw;}
  section{padding:4rem 0 1.5rem;}
  .page-hero{padding:7.5rem 0 2.5rem;}
  footer{ justify-content:center; text-align:center; }
}


/* 2026 portfolio polish: clearer role, stronger actions and 3D model handoff */
.hero-status{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1rem;padding:.48rem .78rem;border:1px solid rgba(34,211,245,.24);border-radius:999px;background:rgba(34,211,245,.055);font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text-muted)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(34,211,245,.12),0 0 14px rgba(34,211,245,.7);animation:statusPulse 2.2s ease-in-out infinite}
@keyframes statusPulse{50%{opacity:.5;transform:scale(.82)}}
.hero-focus{display:flex;flex-wrap:wrap;gap:.55rem;margin:-.7rem 0 1.6rem}
.hero-focus span{padding:.38rem .65rem;border:1px solid var(--line);border-radius:6px;background:rgba(150,150,200,.035);font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text-faint)}
.btn-text{border-color:transparent;padding-left:.45rem;padding-right:.45rem;color:var(--cyan)}
.btn-text:hover{color:var(--text);transform:translateX(2px)}
.home-link-card:focus-visible,.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
@media (max-width:880px){.hero-status{margin-left:auto;margin-right:auto}.hero-focus{justify-content:center}}
@media (max-width:520px){.hero{padding-top:7.6rem}.hero h1{font-size:clamp(1.9rem,10vw,2.55rem)}.hero-sub{font-size:.98rem}.hero-actions{display:grid;width:100%;gap:.75rem}.hero-actions .btn{width:100%;justify-content:center}.hero-actions .btn-text{border:1px solid transparent}.hero-focus{gap:.4rem}.hero-focus span{font-size:.64rem}.home-links{grid-template-columns:1fr}.home-link-card{padding:1.5rem}.section-head{margin-bottom:2rem}}


/* Featured projects — homepage */
.featured-projects{padding-top:1.5rem}
.section-link{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--cyan);text-decoration:none;white-space:nowrap}
.section-link:hover{color:var(--text);transform:translateX(3px)}
.featured-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.featured-project-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(139,62,240,.07),rgba(5,6,17,.76));transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.featured-project-card:hover{transform:translateY(-6px);border-color:rgba(34,211,245,.35);box-shadow:0 18px 50px rgba(0,0,0,.28)}
.featured-project-image{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--line);background:#0a0c1b}
.featured-project-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,6,17,.62));pointer-events:none}
.featured-project-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s ease;filter:saturate(.86) contrast(1.04)}
.featured-project-card:hover .featured-project-image img{transform:scale(1.035);filter:saturate(1) contrast(1.08)}
.featured-project-body{padding:1.35rem 1.35rem 1.45rem}
.featured-project-meta{display:flex;flex-wrap:wrap;gap:.42rem;margin-bottom:.9rem}
.featured-project-meta span{padding:.3rem .5rem;border:1px solid rgba(139,62,240,.25);border-radius:999px;background:rgba(139,62,240,.07);font-family:'JetBrains Mono',monospace;font-size:.61rem;color:var(--text-faint)}
.featured-project-card h3{margin:0 0 .7rem;font-size:1.05rem;line-height:1.35}
.featured-project-card p{margin:0 0 1rem;color:var(--text-muted);font-size:.88rem;line-height:1.7}
.featured-project-link{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--cyan);text-decoration:none}
.featured-project-link:hover{color:var(--text)}
@media (max-width:980px){.featured-project-grid{grid-template-columns:1fr 1fr}.featured-project-card:last-child{grid-column:1/-1}}
@media (max-width:640px){.featured-project-grid{grid-template-columns:1fr}.featured-project-card:last-child{grid-column:auto}.section-link{display:none}.featured-project-body{padding:1.2rem}}

/* Portfolio refinement — clearer hierarchy and recruiter-focused value */
.hero-socials{display:flex;align-items:center;gap:1.2rem;margin-top:1.05rem;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--text-faint)}
.hero-socials a{display:inline-flex;align-items:center;gap:.3rem;transition:color .2s ease,transform .2s ease}
.hero-socials a:hover{color:var(--cyan);transform:translateY(-1px)}
.value-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:0;padding-bottom:2.5rem;position:relative;z-index:2}
.value-item{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.35rem 1.4rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(150,150,200,.025),rgba(5,6,17,.1))}
.value-item+.value-item{border-left:1px solid var(--line)}
.value-index{padding-top:.15rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--cyan)}
.value-item h2{margin:0 0 .35rem;font-size:.9rem;line-height:1.3}
.value-item p{margin:0;color:var(--text-faint);font-size:.78rem;line-height:1.65}
.featured-project-card{display:flex;flex-direction:column}
.featured-project-body{display:flex;flex:1;flex-direction:column}
.featured-project-link{margin-top:auto;padding-top:.15rem}
@media (max-width:880px){.hero-socials{justify-content:center}.value-strip{grid-template-columns:1fr}.value-item+.value-item{border-left:0;border-top:0}}
@media (max-width:520px){.hero-socials{justify-content:center;gap:.85rem;flex-wrap:wrap}.value-strip{padding-left:5.5vw;padding-right:5.5vw}.value-item{padding:1.2rem 1rem}}

/* Knowledge hub — useful for visitors, credible for recruiters */
.section-intro{max-width:700px;margin-top:.75rem;color:var(--text-muted);font-size:.95rem;line-height:1.75}
.knowledge-hub{padding-top:2rem}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.knowledge-card{position:relative;min-height:290px;padding:1.7rem;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:linear-gradient(145deg,rgba(14,16,35,.94),rgba(7,8,20,.88));display:flex;flex-direction:column;transition:transform .28s var(--zc-ease),border-color .28s ease,box-shadow .28s ease}
.knowledge-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--gradient);opacity:.75}
.knowledge-card::after{content:"";position:absolute;width:170px;height:170px;right:-75px;bottom:-85px;border-radius:50%;background:radial-gradient(circle,rgba(139,62,240,.2),transparent 68%);transition:transform .35s ease}
.knowledge-card--resources::after{background:radial-gradient(circle,rgba(34,211,245,.17),transparent 68%)}
.knowledge-card--journal::after{background:radial-gradient(circle,rgba(193,68,247,.18),transparent 68%)}
.knowledge-card:hover{transform:translateY(-7px);border-color:rgba(34,211,245,.34);box-shadow:0 24px 60px rgba(0,0,0,.3)}
.knowledge-card:hover::after{transform:scale(1.18)}
.knowledge-kicker{position:relative;z-index:1;font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:2.4rem}
.knowledge-card h3{position:relative;z-index:1;font-size:1.4rem;margin-bottom:.8rem}
.knowledge-card p{position:relative;z-index:1;color:var(--text-muted);font-size:.9rem;line-height:1.75;margin-bottom:1.5rem}
.knowledge-cta{position:relative;z-index:1;margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--cyan)}
.home-links{grid-template-columns:repeat(4,minmax(0,1fr))}
.site-footer{display:block;padding:0;border-top:1px solid var(--line)}
.footer-cta{max-width:1140px;margin:0 auto;padding:3.2rem 6vw;display:flex;align-items:center;justify-content:space-between;gap:2.5rem}
.footer-kicker{display:block;margin-bottom:.7rem;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan)}
.footer-cta h2{max-width:720px;margin-bottom:.7rem;font-size:clamp(1.45rem,3vw,2.25rem);line-height:1.18;color:var(--text)}
.footer-cta p{max-width:700px;color:var(--text-muted);font-family:'Inter',sans-serif;font-size:.92rem;line-height:1.7}
.footer-cta .btn{flex-shrink:0}
.footer-bottom{border-top:1px solid var(--line);padding:1.45rem 6vw;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
@media (max-width:980px){.knowledge-grid{grid-template-columns:1fr 1fr}.knowledge-card:last-child{grid-column:1/-1}.home-links{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.knowledge-grid{grid-template-columns:1fr}.knowledge-card:last-child{grid-column:auto}.knowledge-card{min-height:245px}.footer-cta{align-items:flex-start;flex-direction:column;padding-top:2.6rem;padding-bottom:2.6rem}.footer-cta .btn{width:100%;justify-content:center}.footer-bottom{justify-content:center;text-align:center}}

/* V5 — evidence-led portfolio summary and clearer content value */
.impact-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;padding-top:0;padding-bottom:2rem;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative;z-index:3}
.impact-stat{min-height:118px;padding:1.25rem 1.35rem;background:rgba(7,8,20,.96);display:flex;flex-direction:column;justify-content:center;text-decoration:none;transition:background .25s ease,transform .25s ease}
.impact-stat:hover{background:linear-gradient(145deg,rgba(139,62,240,.12),rgba(7,8,20,.98));transform:translateY(-2px)}
.impact-stat strong{font-family:'Space Grotesk',sans-serif;font-size:2rem;line-height:1;color:var(--text);margin-bottom:.55rem;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.impact-stat span{font-size:.76rem;line-height:1.5;color:var(--text-faint)}
.project-outcome{margin:-.1rem 0 .8rem;padding-left:.7rem;border-left:2px solid rgba(34,211,245,.55);font-size:.72rem;line-height:1.55;color:#b8c3d9}
.knowledge-kicker{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.knowledge-kicker b{font-size:.56rem;font-weight:500;letter-spacing:.03em;text-transform:none;color:var(--text-faint);padding:.28rem .45rem;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
@media(max-width:880px){.impact-stats{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.impact-stats{grid-template-columns:1fr 1fr;margin-left:5.5vw;margin-right:5.5vw;padding-left:0;padding-right:0}.impact-stat{min-height:105px;padding:1rem}.impact-stat strong{font-size:1.7rem}.impact-stat span{font-size:.69rem}.knowledge-kicker{align-items:flex-start;flex-direction:column}.knowledge-kicker b{white-space:normal}}

/* Homepage V6 — curated entry points, scalable content architecture */
.home-compass{padding-top:clamp(72px,9vw,128px)}
.home-compass-head{margin-bottom:28px}
.home-compass-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-compass-card{position:relative;display:flex;min-height:250px;flex-direction:column;padding:26px;border:1px solid rgba(125,139,204,.24);border-radius:24px;background:linear-gradient(155deg,rgba(15,18,39,.9),rgba(7,9,24,.76));overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.home-compass-card::after{content:"";position:absolute;right:-48px;bottom:-58px;width:150px;height:150px;border:1px solid rgba(88,214,255,.12);border-radius:50%;transition:transform .3s ease,border-color .3s ease}
.home-compass-card:hover{transform:translateY(-5px);border-color:rgba(66,211,255,.5);background:linear-gradient(155deg,rgba(18,23,49,.98),rgba(9,11,29,.9))}
.home-compass-card:hover::after{transform:scale(1.16);border-color:rgba(171,80,255,.32)}
.home-compass-card--primary{grid-column:span 2;background:linear-gradient(145deg,rgba(28,22,66,.92),rgba(7,18,38,.9))}
.home-compass-code{font:500 .72rem/1.3 "JetBrains Mono",monospace;letter-spacing:.12em;color:#73ddff}
.home-compass-card h3{margin:36px 0 12px;font-size:clamp(1.45rem,2.4vw,2rem)}
.home-compass-card p{max-width:52ch;margin:0;color:var(--muted);line-height:1.7}
.home-compass-link{margin-top:auto;padding-top:28px;font-weight:600;color:#d7e7ff}
.home-spotlight{display:grid;grid-template-columns:minmax(0,.9fr) minmax(340px,1.1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(82px,10vw,150px);padding-bottom:clamp(34px,5vw,72px)}
.home-spotlight-copy h2{margin:10px 0 16px;font-size:clamp(2rem,4.2vw,3.8rem);line-height:1.06}
.home-spotlight-copy>p{color:var(--muted);line-height:1.75}
.home-spotlight-copy h3{margin:22px 0 10px;font-size:clamp(1.25rem,2.2vw,1.7rem)}
.home-spotlight-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.home-spotlight-visual{display:block;border:1px solid rgba(117,139,213,.28);border-radius:28px;overflow:hidden;background:#090b18;box-shadow:0 28px 80px rgba(0,0,0,.28);transition:transform .3s ease,border-color .3s ease}
.home-spotlight-visual:hover{transform:translateY(-5px);border-color:rgba(63,213,255,.55)}
.home-spotlight-visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.feed-section{padding-top:clamp(72px,9vw,128px)}
@media(max-width:900px){.home-compass-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-compass-card--primary{grid-column:span 2}.home-spotlight{grid-template-columns:1fr}.home-spotlight-visual{order:-1}}
@media(max-width:620px){.home-compass-grid{grid-template-columns:1fr}.home-compass-card--primary{grid-column:auto}.home-compass-card{min-height:220px;padding:22px}.home-spotlight-actions{align-items:stretch}.home-spotlight-actions .btn{width:100%;justify-content:center}}