/* ============================================================
   GoldSyntax bileşenleri (spec §9). Paylaşılan çekirdek.
   Hover hareketleri yalnızca ince imleçte; basma geri bildirimi her yerde (scale .97).
   Geçişlerde `all` yok; yalnızca transform/opacity ve renk özellikleri.
   ============================================================ */

/* Kontrol metni seçilmez (içerik seçilebilir kalır); uzun basışta iOS çağrı kutusu çıkmaz. */
.btn, .nav__toggle, .motion-toggle, .lang, .fab, .footer__socials a {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

/* ---------- Marka ---------- */
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--target);
  font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
}
.brand b { font-weight: inherit; color: var(--accent); }
.brand__mark { height: 1.75rem; width: auto; aspect-ratio: 1201 / 851; color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky); height: var(--header-h);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
html:not(.js) .site-header { background: var(--bg); border-bottom-color: var(--line); }   /* JS yoksa içerik altından geçer */

.nav { height: 100%; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: flex; align-items: center; gap: 1rem; container: nav / inline-size; }
/* Dar kapta (320px telefon ya da büyütülmüş yazı) logotip yazısı gider, işaret kalır; menü düğmesi görünüm alanından taşmaz.
   rem'li container query hem genişliğe hem yazı boyutuna tepki verir (media query'deki rem tarayıcı varsayılanına bağlıdır, kök yazı boyutuna değil). */
@container nav (max-width: 19rem) { .brand__name { display: none; } }
.nav__links { display: flex; gap: 0.25rem; margin-left: 1.5rem; }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: var(--target); padding: 0 0.9rem;
  border-radius: var(--r-pill); color: var(--ink-soft); font-weight: 500; text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.5rem; height: 2px; border-radius: 2px; background: var(--accent);
}
.nav__right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.lang {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--target); padding: 0 0.85rem;
  border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink-soft);
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.lang .ico { width: 1.1rem; height: 1.1rem; }

/* Hareket düğmesi (WCAG 2.2.2): aria-pressed=true → hareket açık */
.motion-toggle {
  display: inline-grid; place-items: center; width: var(--target); height: var(--target);
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.motion-toggle .ico { width: 1.15rem; height: 1.15rem; }
.motion-toggle .ico--play { display: none; }
html[data-motion="off"] .motion-toggle .ico--pause { display: none; }
html[data-motion="off"] .motion-toggle .ico--play { display: block; }
.motion-toggle[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Hamburger → X */
.nav__toggle {
  position: relative; display: none; width: var(--target); height: var(--target);
  border: 1px solid var(--line); border-radius: 50%; color: var(--ink);
}
.nav__toggle-bar {
  position: absolute; left: 50%; top: calc(50% - 1px); width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: currentColor;
  transition: transform var(--t-move) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.nav__toggle-bar:nth-child(1) { transform: translateY(-6px); }
.nav__toggle-bar:nth-child(3) { transform: translateY(6px); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: rotate(-45deg); }

@media (max-width: 899.98px) {
  .nav .nav__links, .nav .nav__cta { display: none; }          /* .btn'den daha özgül: display:inline-flex'i ezer */
  .nav .nav__toggle { display: inline-block; }
  .lang span { display: none; }                         /* dar ekranda yalnızca ikon (aria-label var) */
  .lang { padding: 0; width: var(--target); justify-content: center; }
}

/* ---------- Mobil tam ekran menü ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-deep);                       /* tam opak: arkadaki sayfa görünmez */
  animation: menu-in var(--t-slow) var(--ease-expo) both;
}
.mobile-menu__inner { display: grid; max-width: 32rem; }
.mobile-menu a {
  display: flex; align-items: center; min-height: 3.5rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 6.5vw, 2.5rem); letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
  animation: menu-link var(--t-slow) var(--ease-expo) both;
}
.mobile-menu a:nth-child(2) { animation-delay: 40ms; }
.mobile-menu a:nth-child(3) { animation-delay: 80ms; }
.mobile-menu a:nth-child(4) { animation-delay: 120ms; }
.mobile-menu a:nth-child(5) { animation-delay: 160ms; }
.mobile-menu a.is-active { color: var(--accent); }
.mobile-menu .mobile-menu__lang { margin-top: 1.25rem; border-bottom: 0; font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--ink-soft); }
html.menu-open { overflow: hidden; }
html.menu-open .site-header { z-index: calc(var(--z-menu) + 1); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@keyframes menu-in   { from { opacity: 0; } }
@keyframes menu-link { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Butonlar ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent; --btn-glow: var(--glow);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: var(--target); max-width: 100%; padding: 0.7rem 1.5rem; border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; text-wrap: balance;
  transition: transform var(--t-move) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.btn .ico { width: 1.15em; height: 1.15em; }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.btn--ghost  { --btn-bd: var(--line-strong); }
.btn--wa     { --btn-bg: var(--wa); --btn-fg: var(--on-accent); --btn-glow: 0 12px 30px -10px oklch(0.72 0.16 155 / 0.5); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: var(--btn-glow); }
  .btn--accent:hover { --btn-bg: var(--accent-bright); }
  .btn--ghost:hover { --btn-bd: var(--accent); --btn-fg: var(--accent-bright); }
  .lang:hover, .motion-toggle:hover:not([aria-disabled="true"]) { color: var(--ink); border-color: var(--line-strong); }
  .nav__links a:hover { color: var(--ink); }
}
.btn:active { transform: translateY(0) scale(0.97); box-shadow: none; transition-duration: 90ms; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lang:active, .motion-toggle:active, .nav__toggle:active { transform: scale(0.95); }

/* ---------- Metin linki: alt çizgi soldan dolar, ok kayar ---------- */
.tlink {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem; min-height: var(--target);
  color: var(--ink); font-weight: 500; text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.tlink::before, .tlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 0.8em); height: 1px; transform-origin: left center;
}
.tlink::before { background: var(--line-strong); }
.tlink::after  { background: var(--accent); transform: scaleX(0); transition: transform var(--t-move) var(--ease-out); }
.tlink .ico { width: 1em; height: 1em; transition: transform var(--t-move) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tlink:hover { color: var(--accent-bright); }
  .tlink:hover::after { transform: scaleX(1); }
  .tlink:hover .ico { transform: translateX(3px); }
  .tlink--out:hover .ico { transform: translate(2px, -2px); }
}
.tlink:active .ico { transform: translateX(1px); }

/* ---------- Mono etiket: yalnızca gerçek meta (teknoloji, süre) ---------- */
.tag {
  display: inline-flex; align-items: center; padding: 0.22rem 0.7rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; max-width: 100%;   /* sığdığı sürece tek satır; büyütülmüş yazıda kabından geniş kalırsa satıra bölünür */
  font-variant-numeric: tabular-nums;
}

/* ---------- Form ---------- */
.field { display: grid; gap: 0.5rem; }
.field__label { color: var(--ink-soft); font-size: 0.9375rem; font-weight: 500; }
.field__hint { color: var(--muted); font-size: 0.875rem; }
.field__error { display: flex; gap: 0.5rem; align-items: baseline; color: var(--danger); font-size: 0.9375rem; font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: 0.8rem 1rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--ink);
  font-size: 1rem; line-height: 1.5;                                  /* 16px: iOS yakınlaştırmaz */
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 50%, calc(100% - 1rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat;
}
.field select option { background: var(--surface-2); color: var(--ink); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field :disabled { opacity: 0.5; cursor: not-allowed; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot */

.form__status {
  display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 1.25rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
}
.form__status--ok    { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
.form__status--error { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 9%, var(--surface)); }
.form__status:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }

/* ---------- Footer ---------- */
.site-footer { position: relative; z-index: var(--z-content); margin-top: var(--sp-xl); padding: var(--sp-lg) 0 var(--sp-md); background: var(--bg-deep); border-top: 1px solid var(--line); }
.footer__big { margin-bottom: var(--sp-lg); }
.footer__big a {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5.5vw + 0.5rem, 5rem); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display); text-decoration: none; text-wrap: balance; overflow-wrap: anywhere;
  transition: color var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .footer__big a:hover { color: var(--accent); } }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-md) clamp(2rem, 5vw, 4rem); }
.footer__tag { margin-top: 0.5rem; color: var(--ink-soft); max-width: 28ch; }
.footer__h { margin-bottom: 0.5rem; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.footer__links { display: grid; justify-items: start; }
.footer__links a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--target); color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; transition: color var(--t-fast) var(--ease-out); }
.footer__links a .ico { width: 1em; height: 1em; }
@media (hover: hover) and (pointer: fine) { .footer__links a:hover { color: var(--ink); text-decoration: underline; } }
.footer__socials { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.footer__socials a {
  display: inline-grid; place-items: center; width: var(--target); height: var(--target); border: 1px solid var(--line); border-radius: 50%; color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-move) var(--ease-out);
}
.footer__socials .ico { width: 1.15rem; height: 1.15rem; }
@media (hover: hover) and (pointer: fine) { .footer__socials a:hover { color: var(--ink); border-color: var(--line-strong); } }
.footer__socials a:active { transform: scale(0.95); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem;
}
.footer__bottom .lang span { display: inline; }
.footer__bottom .lang { width: auto; padding: 0 0.85rem; }
@media (max-width: 767.98px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp FAB: ilk 100vh gizli, kapanışta gizli (JS .is-visible) ---------- */
.fab-wrap { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: var(--z-fab); }
.fab {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--wa); color: var(--on-accent); box-shadow: var(--lift);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-move) var(--ease-out), visibility 0s linear 0s;
}
.fab .ico { width: 26px; height: 26px; }
.fab:active { transform: scale(0.94); }
html.js .fab:not(.is-visible) { opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.96); pointer-events: none; transition-delay: 0s, 0s, var(--t-base); }

/* ---------- Reveal: varsayılan GÖRÜNÜR ----------
   İçerik yalnızca reveal betiği GERÇEKTEN başladığında (html.reveal-ready, site.js ekler) ve hareket açıkken
   hafif yukarı kayma + opaklıkla belirir. Betik yüklenmezse/çökerse içerik asla gizli kalmaz.
   Görseller (img/picture/figure/video) opaklıkla ASLA gizlenmez; yalnızca transform ile hareket eder. */
html.reveal-ready:not([data-motion="off"]) :is(.reveal, [data-reveal]):not(.is-in) { transform: translateY(16px); }
html.reveal-ready:not([data-motion="off"]) :is(.reveal, [data-reveal]):not(.is-in):not(img, picture, figure, video, canvas, svg) { opacity: 0; }
/* Geçiş YALNIZCA belirme yönünde (.is-in durumuna): gizleme anlık olur, ekranın hemen altındaki öğe solmaz. */
html.reveal-ready:not([data-motion="off"]) :is(.reveal, [data-reveal]).is-in {
  transition: opacity var(--t-slow) var(--ease-expo), transform var(--t-slow) var(--ease-expo);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
html.reveal-ready:not([data-motion="off"]) [data-reveal][data-delay="1"] { --reveal-i: 1; }
html.reveal-ready:not([data-motion="off"]) [data-reveal][data-delay="2"] { --reveal-i: 2; }
html.reveal-ready:not([data-motion="off"]) [data-reveal][data-delay="3"] { --reveal-i: 3; }

@media print {
  [data-reveal], .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 3D tuval (boot.js ekler): sayfanın arkasında, tıklamayı geçirir ---------- */
.stage-canvas { position: fixed; inset: 0; z-index: var(--z-stage); display: block; width: 100%; height: 100%; pointer-events: none; }