/* ============================================================
   Mental Ability — Kurumsal: grafit + lacivert + gri + sarı
   (Tailwind ile birlikte; sade, yapısal, AI hissi yok)
   ============================================================ */

html { scroll-behavior: smooth; }
body { background-color: #f4f5f7; overflow-x: hidden; }

/* logotype — büyük harf, geniş aralıklı, gold kare ayraçlı */
.wordmark { font-family: "Montserrat", "Space Grotesk", system-ui, sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: 0.14em; line-height: 1; white-space: nowrap; }
.wordmark .sq { display: inline-block; width: 0.36em; height: 0.36em; background: var(--accent,#f2b705); margin: 0 0.4em; vertical-align: 0.06em; }
.wordmark__tag { font-family: "Montserrat", system-ui, sans-serif; text-transform: uppercase; font-weight: 500; letter-spacing: 0.22em; line-height: 1; }

/* çok hafif yapısal arka plan — sade, soğuk */
.bg-base {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, #f7f8fa 0%, #f3f4f7 60%, #eef0f4 100%);
}
.bg-base::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(13,23,48,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,23,48,0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 35%, transparent 80%);
          mask-image: radial-gradient(130% 90% at 50% 0%, #000 35%, transparent 80%);
}

/* nokta dokusu (koyu bloklar için) */
.dotgrid {
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* hücre — kenarlıksız, hafif yuvarlak, şeffaf; hover'da yumuşak dolgu */
.cellx { border-radius: 14px; transition: background-color .25s ease, transform .25s ease; }
.cellx:hover { background-color: rgba(255,255,255,0.65); transform: translateY(-2px); }

/* el-çizimi arka plan şeritleri */
.sketch { position: absolute; pointer-events: none; color: #94a3b8; opacity: .22; }
.sketch-gold { color: var(--accent,#f2b705); opacity: .35; }

/* organik (unshaped) yumuşak zeminler */
.blob  { border-radius: 42% 58% 57% 43% / 46% 42% 58% 54%; }
.blob2 { border-radius: 60% 40% 47% 53% / 55% 50% 50% 45%; }

/* lacivert vurgu alt çizgisi — text-decoration (offset'li, yazıya binmez) */
.mark {
  text-decoration-line: underline;
  text-decoration-color: var(--accent, #0d1730);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

/* hover — ölçülü, kurumsal (sıçrama yok, kenarlık + hafif gölge) */
.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13,23,48,0.08); border-color: #cbd5e1; }

/* reveal */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"]{ transition-delay:.07s; }
[data-reveal][data-delay="2"]{ transition-delay:.14s; }
[data-reveal][data-delay="3"]{ transition-delay:.21s; }
[data-reveal][data-delay="4"]{ transition-delay:.28s; }

/* marquee */
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover { animation-play-state: paused; }

/* mobil menü */
.mmenu { opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
body.nav-open .mmenu { opacity: 1; transform: none; pointer-events: auto; }
body.nav-open { overflow: hidden; }

/* header scroll */
#hdr { transition: box-shadow .3s ease, background-color .3s ease; }
#hdr.is-scrolled { box-shadow: 0 1px 0 rgba(13,23,48,0.08), 0 10px 30px rgba(13,23,48,0.05); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .marquee{animation:none;}
  html{scroll-behavior:auto;}
}

/* dil seçim çubuğu (alttan) */
.langbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 1px solid rgba(13,23,48,.12);
  box-shadow: 0 -10px 30px rgba(13,23,48,.07); }
.langbar[hidden] { display: none; }
.langbar__in { max-width: 80rem; margin: 0 auto; padding: 11px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.langbar__label { display: inline-flex; align-items: center; gap: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px;
  letter-spacing: .04em; color: var(--ink, #0d1730); }
.langbar__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.langbar__opt { font-size: 13px; font-weight: 600; color: #475569;
  padding: 6px 14px; border: 1px solid #e2e8f0; border-radius: 8px; transition: .2s; }
.langbar__opt:hover { border-color: #94a3b8; color: var(--ink, #0d1730); }
.langbar__opt.is-on { background: var(--ink, #0d1730); color: #fff; border-color: var(--ink, #0d1730); }
.langbar__x { margin-left: auto; color: #94a3b8; padding: 6px; line-height: 0; }
.langbar__x:hover { color: var(--ink, #0d1730); }