/* ============ motionall — marka katmanı ============
   Kaynak: logo/readme.md + logo/anim/readme.md (logo kit 2B).

   Burada üç iş var:
     1) İşaret (stroke çerçeve içinde "M") — nav, alt bilgi, stüdyo üst çubuğu,
        yani sayfadan sayfaya "geri dönülen" her yer. Mevcut HTML'de bu noktaların
        hepsinde zaten `<span class="dot">` duruyordu; onun görünümünü burada
        değiştiriyoruz, böylece 18 sayfanın işaretlerini tek yerden yönetiyoruz.
     2) Açılış animasyonu (sting) ve yükleme göstergesi.
     3) Kelime markasının tipografisi: kit Space Grotesk Medium diyor.

   Bu dosya app.css/landing.css'ten SONRA yükleniyor; `.logo .dot` gibi eşit
   özgüllükteki kurallar bu yüzden !important olmadan kazanıyor.

   Marka renkleri sitenin --acc / --acc-2 değişkenlerinden AYRI tutuldu: site
   teması (camgöbeği-mor) değişse bile logo kendi paletinde kalmalı. */

:root {
  --mo-lilac:  #B3A4FF;
  --mo-purple: #9184D9;
  --mo-blue:   #4F9CF0;
  --mo-solid:  #6B5FD0;   /* açık zeminde tek renk */
  --mo-ink:    #14152A;
  --mo-light:  #F2F2F6;
  --mo-grad:   linear-gradient(135deg, #B3A4FF, #9184D9 50%, #4F9CF0);
}

/* ---------- kelime markası ----------
   Kit: Space Grotesk Medium (500), tracking -3.5%. Yazının kendisi HTML'de
   kaldı (küçük harfli "motionall" — AK.BRAND ile aynı; filigran, yedek dosya
   adı ve hukuk metinleri hep bu yazımı kullanıyor). */
.logo,
.logo-btn {
  font-family: "Space Grotesk", var(--fs, Inter, sans-serif);
  font-weight: 500;
  letter-spacing: -.035em;
  gap: 10px;
}

/* ---------- odak halkası ----------
   Klavyeyle gezen kullanıcı da markanın rengini görüyor. `:where()` özgüllüğü
   sıfır olduğu için mevcut odak kuralları (input:focus gibi) bunu eziyor —
   yalnızca hiç odak biçimi olmayan yerleri dolduruyor. */
:where(a, button, [tabindex], summary):focus-visible {
  outline: 2px solid var(--acc, #B3A4FF);
  outline-offset: 2px;
}

/* ---------- işaret ----------
   JS yoksa da görünsün diye data-URI olarak arka planda duruyor; js/brand.js
   açıldığında bunu satır içi SVG ile değiştiriyor (üzerine gelince çerçeve
   yeniden çiziliyor — bunu arka plan görseliyle yapmak mümkün değil). */
.logo .dot,
.mo-mark {
  width: 24px; height: 24px;
  flex: none;
  border-radius: 0;
  box-shadow: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='86' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23B3A4FF'/%3E%3Cstop offset='.5' stop-color='%239184D9'/%3E%3Cstop offset='1' stop-color='%234F9CF0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3.5 3.5H82.5V60.5L60.5 82.5H3.5V3.5Z' stroke='url(%23g)' stroke-width='7'/%3E%3Cpath d='M20 62V24H31L43 43L55 24H66V62H56V41L45 58H41L30 41V62H20Z' fill='url(%23g)'/%3E%3C/svg%3E");
}
.mo-mark { display: inline-block; vertical-align: middle; }

/* Satır içi SVG geldiğinde arka plan kalksın. */
.logo .dot.mo-svg,
.mo-mark.mo-svg { background-image: none; }
.mo-svg > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Kit kuralı: küçük boyda gradyan değil tek renk kullanılır. Alt bilgideki
   logo (20px) ve Tracking Studio'nun 42px'lik üst çubuğundaki işaret (18px)
   bu yüzden tek renk mora düşüyor. CSS, SVG'nin stroke/fill özniteliğini
   ezdiği için bunu ayrı bir dosyaya gerek kalmadan burada yapabiliyoruz. */
.foot .logo .dot,
.tool-foot .logo .dot { width: 20px; height: 20px; }
.mo-mark--sm { width: 18px; height: 18px; margin-right: 7px; }

.foot .logo .dot .mo-fr,
.tool-foot .logo .dot .mo-fr,
.mo-mark--sm .mo-fr { stroke: var(--mo-purple); }
.foot .logo .dot .mo-m,
.tool-foot .logo .dot .mo-m,
.mo-mark--sm .mo-m { fill: var(--mo-purple); }

/* ---------- geri dönüş: üzerine gelince çerçeve yeniden çiziliyor ----------
   Nav'daki logo ve stüdyodaki "Ana sayfaya dön" düğmesi aynı işi görüyor:
   bir üst seviyeye çıkmak. Fare üstüne gelince işaret kendini çizerek o işi
   duyuruyor. */
a.logo:hover .mo-fr,
.logo-btn:hover .mo-fr,
a.logo:focus-visible .mo-fr,
.logo-btn:focus-visible .mo-fr {
  animation: mo-redraw .72s cubic-bezier(.65, 0, .35, 1);
}
@keyframes mo-redraw {
  from { stroke-dashoffset: 304; }
  to   { stroke-dashoffset: 0; }
}
a.logo, .logo-btn { transition: filter .16s, transform .16s; }
a.logo:hover, .logo-btn:hover { filter: brightness(1.06); }

/* ---------- yükleme göstergesi ----------
   Çerçeve boyunca dönen kesik + nefes alan "M". logo/anim/motionall-loader.svg
   ile aynı hareket; burada satır içi olduğu için sitenin akışında da kullanılıyor. */
.mo-spin {
  display: inline-block; flex: none;
  width: 28px; height: 28px;
  line-height: 0;
}
.mo-spin > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mo-spin .mo-fr {
  stroke-dasharray: 152 152;
  animation: mo-chase 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.mo-spin .mo-m {
  transform-origin: 43px 43px;
  animation: mo-breathe 1.8s ease-in-out infinite;
}
@keyframes mo-chase {
  0%   { stroke-dashoffset: 304; }
  50%  { stroke-dashoffset: 152; }
  100% { stroke-dashoffset: 0; }
}
@keyframes mo-breathe {
  0%, 100% { opacity: .5; transform: scale(.93); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* İlerleme çubuklarının yanına js/brand.js takıyor. */
.mo-spin--inline {
  width: 22px; height: 22px;
  margin: 0 auto 8px;
  display: block;
}
.mo-spin--inline.hidden { display: none; }

/* ---------- açılış / yükleme perdesi ---------- */
.mo-boot {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--bg, #0a0b0f);
  opacity: 0; visibility: hidden;
  transition: opacity .38s ease, visibility 0s linear .38s;
  /* Perde açıkken altındaki sayfa tıklanmasın; kapanırken tıklamayı bıraksın. */
  pointer-events: none;
}
.mo-boot.is-on {
  opacity: 1; visibility: visible;
  transition: opacity .2s ease;
  pointer-events: auto;
}
.mo-boot::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 50% at 50% 46%, rgba(145, 132, 217, .22), transparent 70%);
}
.mo-boot-in {
  position: relative;
  display: flex; align-items: center; gap: 26px;
  padding: 0 24px;
}
.mo-boot-mark { width: 96px; height: 96px; flex: none; }
.mo-boot-mark > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mo-boot-copy { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.mo-boot-word {
  display: flex;
  font-family: "Space Grotesk", var(--fs, Inter, sans-serif);
  font-size: clamp(34px, 7vw, 54px); font-weight: 500;
  letter-spacing: -.035em; line-height: 1;
  color: var(--mo-light);
}
.mo-boot-word span { display: inline-block; }
.mo-boot-tag {
  font-family: "Space Grotesk", var(--fs, Inter, sans-serif);
  /* Metin doğrudan büyük harf yazılıyor: text-transform, lang="tr" altında
     "motion" kelimesini "MOTİON" yapıyor. */
  font-size: 12px; font-weight: 500;
  letter-spacing: .28em; color: var(--mo-purple);
}
.mo-boot-skip {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3, #6d7488);
  opacity: 0; animation: mo-skip-in .4s ease 1.9s forwards;
}

/* Kısa yükleme: sadece işaret döner, yazı yok. */
.mo-boot--load .mo-boot-copy { display: none; }
.mo-boot--load .mo-boot-mark { width: 64px; height: 64px; }
.mo-boot--load .mo-fr {
  stroke-dasharray: 152 152;
  animation: mo-chase 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.mo-boot--load .mo-m {
  transform-origin: 43px 43px;
  animation: mo-breathe 1.8s ease-in-out infinite;
}

/* Açılış: çerçeve çizilir, "M" soldan açılır, harfler yükselir, alt yazı oturur.
   logo/anim/embed-sting.html'deki hareketin tek seferlik hâli — orada döngü var,
   açılışta döngü olmaz. */
.mo-boot--intro .mo-fr {
  stroke-dasharray: 304; stroke-dashoffset: 304;
  animation: mo-draw 1.15s cubic-bezier(.65, 0, .35, 1) .06s forwards;
}
.mo-boot--intro .mo-wipe {
  transform: scaleX(0); transform-origin: 18px 20px;
  animation: mo-wipe .6s cubic-bezier(.65, 0, .35, 1) .38s forwards;
}
.mo-boot--intro .mo-boot-word span {
  opacity: 0; transform: translateY(15px);
  animation: mo-letter .52s cubic-bezier(.33, 1, .68, 1) forwards;
}
.mo-boot--intro .mo-boot-word span:nth-child(1) { animation-delay: .52s }
.mo-boot--intro .mo-boot-word span:nth-child(2) { animation-delay: .57s }
.mo-boot--intro .mo-boot-word span:nth-child(3) { animation-delay: .62s }
.mo-boot--intro .mo-boot-word span:nth-child(4) { animation-delay: .67s }
.mo-boot--intro .mo-boot-word span:nth-child(5) { animation-delay: .72s }
.mo-boot--intro .mo-boot-word span:nth-child(6) { animation-delay: .77s }
.mo-boot--intro .mo-boot-word span:nth-child(7) { animation-delay: .82s }
.mo-boot--intro .mo-boot-word span:nth-child(8) { animation-delay: .87s }
.mo-boot--intro .mo-boot-word span:nth-child(9) { animation-delay: .92s }
.mo-boot--intro .mo-boot-tag {
  opacity: 0; letter-spacing: .5em;
  animation: mo-tag .7s cubic-bezier(.33, 1, .68, 1) 1.02s forwards;
}
@keyframes mo-draw   { to { stroke-dashoffset: 0 } }
@keyframes mo-wipe   { to { transform: scaleX(1) } }
@keyframes mo-letter { to { opacity: 1; transform: translateY(0) } }
@keyframes mo-tag    { to { opacity: 1; letter-spacing: .28em } }
@keyframes mo-skip-in{ to { opacity: 1 } }

/* Perde açıkken sayfa kaymasın. */
html.mo-booting, html.mo-booting body { overflow: hidden; }

@media (max-width: 560px) {
  .mo-boot-in { flex-direction: column; gap: 18px; text-align: center; }
  .mo-boot-copy { align-items: center; }
  .mo-boot-mark { width: 76px; height: 76px; }
}

/* ---------- hareket azaltma ----------
   Logo tam hâliyle durur, perde yalnızca kısa bir kapak olur. */
@media (prefers-reduced-motion: reduce) {
  .mo-boot--intro .mo-fr,
  .mo-boot--load  .mo-fr,
  .mo-spin .mo-fr { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .mo-boot--intro .mo-wipe { animation: none; transform: none; }
  .mo-boot--intro .mo-boot-word span { animation: none; opacity: 1; transform: none; }
  .mo-boot--intro .mo-boot-tag { animation: none; opacity: 1; letter-spacing: .28em; }
  .mo-boot--load .mo-m, .mo-spin .mo-m { animation: none; opacity: 1; }
  .mo-boot-skip { animation: none; opacity: 1; }
  a.logo:hover .mo-fr, .logo-btn:hover .mo-fr { animation: none; }
}