/* ==========================================================================
   Sections — nav · footer (hero: hero.css, showcase: showcase.css, projeler: projects.css)
   ========================================================================== */

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 22px; height: 22px; flex: none; overflow: visible; }
/* İmleç noktası: üzerine gelince bir kez yanıp söner (hero’daki imleç gibi) */
.logo:hover .logo__dot { animation: logo-blink 0.9s steps(2, jump-none) 2; }
@keyframes logo-blink { 50% { opacity: 0; } }
.logo__word {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.045em;
  line-height: 1;
}
.logo__suffix {
  padding-left: 10px;
  border-left: 1px solid var(--c-line-strong);
  color: var(--c-ink-3);
  line-height: 1;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--c-line); }
.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 64px;
}
.nav__links { display: flex; gap: 4px; }
.nav__links a {
  position: relative;
  padding: 8px 12px;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  border-radius: var(--radius-xs);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav__links a:hover { color: var(--c-ink); background: var(--c-paper-2); }
.nav__links sup { font-family: var(--f-mono); font-size: 9px; color: var(--c-ink-3); margin-left: 2px; vertical-align: 6px; }
.nav__aside { justify-self: end; display: flex; align-items: center; gap: 20px; }
.nav__clock { color: var(--c-ink-3); }
.nav__clock time { color: var(--c-ink); }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  margin-right: -8px;
  position: relative;
}
.nav__toggle span {
  position: absolute; left: 11px; right: 11px;
  height: 1.5px; background: var(--c-ink);
  transition: transform 0.4s var(--ease-out), top 0.4s var(--ease-out);
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 23px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }

.nav__menu {
  display: none;
  border-top: 1px solid var(--c-line);
  padding: 24px var(--gutter) 32px;
  background: var(--c-paper);
}
.nav__menu a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.nav__menu .btn { margin-top: 24px; width: 100%; }
.nav__menu[data-open="true"] { display: block; }

@media (max-width: 900px) {
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__links, .nav__clock, .nav__aside .btn { display: none; }
  .nav__toggle { display: block; }
}
@media (min-width: 901px) {
  .nav__menu[data-open="true"] { display: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { border-top: 1px solid var(--c-line); padding-top: clamp(40px, 5vw, 64px); }
.footer__cta { display: grid; gap: 28px; padding-bottom: clamp(64px, 8vw, 112px); }
.footer__cta .mono { color: var(--c-ink-3); display: flex; gap: 12px; }
.footer__cta .mono b { color: var(--c-accent); font-weight: 400; }
.footer__title {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-h2); letter-spacing: -0.045em; line-height: 0.98;
  max-width: 14ch;
}
.footer__mail {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(22px, 2.8vw, 36px); letter-spacing: -0.035em;
  padding-bottom: 8px;
  background:
    linear-gradient(var(--c-accent), var(--c-accent)) 0 100% / 0 2px no-repeat,
    linear-gradient(var(--c-line-strong), var(--c-line-strong)) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.7s var(--ease-out);
}
.footer__mail svg { width: 0.7em; height: 0.7em; transition: transform 0.5s var(--ease-out); }
.footer__mail:hover { background-size: 100% 2px, 100% 1px; }
.footer__mail:hover svg { transform: translate(3px, -3px); }

.footer__grid { padding-block: 40px; border-top: 1px solid var(--c-line); row-gap: 32px; }
.footer__col { grid-column: span 3; display: grid; gap: 10px; align-content: start; font-size: var(--fs-small); }
.footer__col .mono { color: var(--c-ink-3); margin-bottom: 6px; }
.footer__col a { color: var(--c-ink-2); justify-self: start; transition: color 0.2s; }
.footer__col a:hover { color: var(--c-ink); }
.footer__col address { font-style: normal; color: var(--c-ink-2); }
.footer__brand { display: grid; gap: 16px; }
.footer__brand p { color: var(--c-ink-3); max-width: 28ch; }

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-3);
}
.footer__bottom a:hover { color: var(--c-ink); }

@media (max-width: 900px) {
  .footer__col { grid-column: span 6; }
}
@media (max-width: 520px) {
  .footer__col { grid-column: 1 / -1; }
}