/* Aparox — global styles, hover states, responsive, animations */

:root {
  --ink: #16233F;
  --paper: #F5F5F1;
  --teal: #2E7D83;
  --teal-soft: #7FBFC4;
  --ink-muted: rgba(22, 35, 63, 0.72);
  --ink-line: rgba(22, 35, 63, 0.12);
}

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
a { color: var(--ink); text-decoration: none; }

/* Language toggling — hide the other language's spans */
html:not([data-lang="en"]) [data-en] { display: none !important; }
html[data-lang="en"] [data-tr] { display: none !important; }

/* Focus visible for accessibility */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reveal-on-scroll initial state (set by JS to avoid FOUC on above-the-fold) */
[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(28px);
}
[data-reveal] {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* Animations shared across pages */
@keyframes apx-drift {
  0% { transform: translateY(-52%); }
  50% { transform: translateY(calc(-52% - 14px)); }
  100% { transform: translateY(-52%); }
}
@keyframes apx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes apx-scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
@keyframes apx-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes apx-spin-r { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes apx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes apx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes apx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46,125,131,0.25); }
  60% { box-shadow: 0 0 0 42px rgba(46,125,131,0); }
}
@keyframes apx-infall {
  0% { transform: rotate(0deg) translateX(210px) scale(1); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: rotate(170deg) translateX(6px) scale(0.1); opacity: 0; }
}
@keyframes apx-dissolve {
  0%, 34% { opacity: 1; filter: blur(0); letter-spacing: 0.02em; }
  72% { opacity: 0; filter: blur(5px); letter-spacing: 0.3em; }
  100% { opacity: 0; filter: blur(5px); }
}
@keyframes apx-rise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.7; }
  100% { transform: translateY(-46vh); opacity: 0; }
}
@keyframes apx-msg-in {
  0%, 8% { opacity: 0; transform: translateY(14px); }
  16%, 55% { opacity: 1; transform: translateY(0); }
  72%, 100% { opacity: 0; transform: translateY(-10px); filter: blur(6px); letter-spacing: 0.22em; }
}

/* ---------------- HOVER STATES ---------------- */

/* Nav link — light theme */
.nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  opacity: 0.75;
  transition: opacity 0.25s, color 0.25s;
}
.nav-link:hover { opacity: 1; color: var(--teal); }

/* Nav link — dark theme (whisper) */
.nav-link-dark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(245, 245, 241, 0.75);
  transition: color 0.25s;
}
.nav-link-dark:hover { color: var(--teal-soft); }

/* Primary pill CTA — dark background, light text */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 400;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
.btn-primary:hover { background: var(--teal); color: var(--paper); transform: translateY(-1px); }

/* Ghost pill (light theme) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(22, 35, 63, 0.25);
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: border-color 0.3s, color 0.3s;
}
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }

/* Primary pill inverted (for Whisper dark hero) */
.btn-primary-inv {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  color: var(--ink);
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: background 0.3s, color 0.3s;
}
.btn-primary-inv:hover { background: var(--teal-soft); color: #0B1322; }

/* Ghost pill (dark theme) */
.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(245, 245, 241, 0.3);
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--paper);
  transition: border-color 0.3s, color 0.3s;
}
.btn-ghost-dark:hover { border-color: var(--teal-soft); color: var(--teal-soft); }

/* Project name link */
.link-teal { transition: color 0.25s; }
.link-teal:hover { color: var(--teal); }

/* Project "İncele" pill */
.pill-teal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  border: 1px solid rgba(46, 125, 131, 0.4);
  color: var(--teal);
  border-radius: 999px;
  padding: 7px 16px;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pill-teal:hover { background: var(--teal); color: var(--paper); border-color: var(--teal); }

/* Vault card lift */
.card-lift {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(22, 35, 63, 0.14);
}

/* Contact mailto link */
.mail-link {
  display: inline-block;
  font-weight: 200;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(22, 35, 63, 0.2);
  padding-bottom: 8px;
  transition: color 0.3s, border-color 0.3s;
}
.mail-link:hover { color: var(--teal); border-bottom-color: var(--teal); }

/* Language toggle buttons */
.lang-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: rgba(22, 35, 63, 0.55);
  transition: background 0.25s, color 0.25s;
}
.lang-btn.is-active { background: var(--ink); color: var(--paper); }

/* Dark-theme lang buttons (whisper) */
.lang-btn-dark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: rgba(245, 245, 241, 0.6);
  transition: background 0.25s, color 0.25s;
}
.lang-btn-dark.is-active { background: var(--paper); color: #0B1322; }

/* Mobile hamburger */
.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(22, 35, 63, 0.18);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: background 0.25s;
}
.menu-toggle .bars { width: 18px; height: 12px; position: relative; }
.menu-toggle .bars::before,
.menu-toggle .bars::after,
.menu-toggle .bars span {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s, opacity 0.2s, background 0.25s;
}
.menu-toggle .bars::before { top: 0; }
.menu-toggle .bars span { top: 50%; margin-top: -0.75px; display: block; }
.menu-toggle .bars::after { bottom: 0; }
body.menu-open .menu-toggle .bars::before { transform: translateY(5px) rotate(45deg); }
body.menu-open .menu-toggle .bars::after { transform: translateY(-5px) rotate(-45deg); }
body.menu-open .menu-toggle .bars span { opacity: 0; }

.menu-toggle-dark { border-color: rgba(245, 245, 241, 0.22); }
.menu-toggle-dark .bars::before,
.menu-toggle-dark .bars::after,
.menu-toggle-dark .bars span { background: var(--paper); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 840px) {
  [data-mq~="pad"] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-mq~="grid1"] { grid-template-columns: 1fr !important; }
  [data-mq~="gapm"] { gap: 16px !important; }
  [data-mq~="wrapm"] { flex-wrap: wrap !important; gap: 14px !important; }
  [data-mq~="ctr"] { text-align: left !important; }
  [data-mq~="doorm"] { max-width: 340px !important; }
}

/* Below 720px: hide inline nav, show hamburger, provide dropdown */
@media (max-width: 720px) {
  .menu-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    left: 0; right: 0;
    top: 64px;
    background: inherit;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 8px 20px 24px !important;
    border-bottom: 1px solid var(--ink-line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
  }
  .nav-links > a, .nav-links > div { padding: 14px 4px; }
  .nav-links > a { border-bottom: 1px solid rgba(22, 35, 63, 0.06); }
  .nav-links .lang-group { align-self: flex-start; margin-top: 8px; }
  body.menu-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Dark nav dropdown backdrop */
  .nav-dark .nav-links { background: #0B1322; border-bottom-color: rgba(245,245,241,0.12); }
  .nav-dark .nav-links > a { border-bottom-color: rgba(245,245,241,0.08); }
}

/* Very small screens: tighten hero paddings */
@media (max-width: 480px) {
  [data-mq~="pad"] { padding-left: 18px !important; padding-right: 18px !important; }
}