/* ── MedExpander logosu ───────────────────────────────────────────────
 *
 * Kaynak: Claude Design → medexpander Logo 16 (16a statik, 16b animasyonlu).
 * Tasarımın kendisi ürünü anlatıyor: tuşa basılır, "medx" yazılır, "x"
 * silinip "expander" açılır. Yani logo, kısaltma genişletmenin resmi.
 *
 * ── TEK ÖLÇEK DÜĞMESİ ────────────────────────────────────────────────
 * Bütün ölçüler `em` cinsinden; logonun büyüklüğü YALNIZCA `font-size`
 * ile ayarlanır. Özgün tasarımda metin 92px, tuş 148px, boşluk 52px idi —
 * oranlar (1.609em, 0.565em …) oradan alındı. Üç sayfada üç ayrı boyut
 * gerekiyordu; her birine ayrı piksel yazmak, biri değişince ötekilerin
 * sessizce eskimesi demekti.
 *
 * ── RENKLER SAYFADAN GELİR ───────────────────────────────────────────
 * Özgün dosya açık krem zemin için çizilmişti (metin #1c1a17). Bizim üç
 * yerleşim noktamızın üçü de KOYU: karşılama ve giriş #06070A, panelin
 * kenar çubuğu #0f172a. Bu yüzden metin rengi devralınıyor (currentColor)
 * ve tuş yüzeyleri değişkene bağlı. Sarı vurgu (#F2B01E) hiçbir yerde
 * değişmiyor: giriş ve karşılama sayfalarının `--uptake` değeriyle zaten
 * birebir aynı ve markanın imzası o nokta.
 */

.mx-logo {
  --mx-vurgu: #F2B01E;      /* nokta + imleç — markanın imzası */
  --mx-kap: #1c1a17;        /* tuş gövdesi */
  --mx-yuz: #262320;        /* tuş yüzeyi (basılınca koyulaşır) */
  --mx-kap-metin: #faf9f6;  /* tuşun üzerindeki "medx." */

  display: inline-flex;
  align-items: center;
  gap: 0.565em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: currentColor;
  white-space: nowrap;
  user-select: none;
}

/* Tuş (keycap) */
.mx-kap {
  width: 1.609em;
  height: 1.609em;
  border-radius: 0.348em;
  background: var(--mx-kap);
  position: relative;
  flex: none;
}
.mx-yuz {
  position: absolute;
  left: 0.130em; right: 0.130em;
  top: 0.109em; bottom: 0.239em;
  border-radius: 0.239em;
  background: var(--mx-yuz);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx-yuz b {
  font-size: 0.391em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--mx-kap-metin);
}
.mx-nokta { color: var(--mx-vurgu); }

/* Kelime */
.mx-yazi { display: flex; align-items: center; }

/* Harfler yalnızca animasyonlu sürümde gizlenip açılıyor; statik
   sürümde bu kutular hiçbir şey yapmaz. */
.mx-h {
  display: inline-block;
  overflow: hidden;
  /* İniş çıkışlı harfler (p, d) kırpılmasın diye taban payı; negatif
     margin ile satır yüksekliği bozulmadan geri alınıyor. */
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

/* ── Animasyonlu sürüm (16b) — 8 saniyelik döngü ──────────────────── */
.mx-logo.canli .mx-kap  { animation: mx-press 8s cubic-bezier(.3,0,.2,1) infinite; }
.mx-logo.canli .mx-yuz  { animation: mx-face  8s cubic-bezier(.3,0,.2,1) infinite; background: none; }

.mx-logo.canli .mx-y1 { animation: mx-t1 8s steps(1,end) infinite; }
.mx-logo.canli .mx-y2 { animation: mx-t2 8s steps(1,end) infinite; }
.mx-logo.canli .mx-y3 { animation: mx-t3 8s steps(1,end) infinite; }
.mx-logo.canli .mx-y4 { animation: mx-t4 8s steps(1,end) infinite; color: var(--mx-vurgu); }

/* Açılan harfler sırayla giriyor. Gecikme `--g` ile veriliyor: sekiz
   harfe sekiz ayrı sınıf yazmak yerine tek kural. */
.mx-logo.canli .mx-ac {
  animation: mx-open 8s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay: calc(var(--g, 0) * 0.05s);
}
.mx-logo.canli .mx-son { animation: mx-dot 8s cubic-bezier(.4,0,.2,1) infinite; }
.mx-logo.canli .mx-imlec {
  display: inline-block;
  width: 0.065em; height: 0.78em;
  margin-left: 0.109em;
  background: var(--mx-vurgu);
  animation: mx-caret 8s steps(1,end) infinite;
}
/* Statik sürümde imleç hiç çizilmez — yanıp sönmeyen bir imleç,
   kullanıcıya orada yazı yazılabileceğini söyleyen yanlış bir işaret. */
.mx-logo:not(.canli) .mx-imlec { display: none; }

@keyframes mx-t1 { 0%,1%   { max-width:0; opacity:0; } 4%,88%  { max-width:1.7em; opacity:1; } 91%,100% { max-width:0; opacity:0; } }
@keyframes mx-t2 { 0%,7%   { max-width:0; opacity:0; } 10%,88% { max-width:1.7em; opacity:1; } 91%,100% { max-width:0; opacity:0; } }
@keyframes mx-t3 { 0%,13%  { max-width:0; opacity:0; } 16%,88% { max-width:1.7em; opacity:1; } 91%,100% { max-width:0; opacity:0; } }
@keyframes mx-t4 { 0%,19%  { max-width:0; opacity:0; } 22%,40% { max-width:1.7em; opacity:1; } 45%,100% { max-width:0; opacity:0; } }
@keyframes mx-open { 0%,44% { max-width:0; opacity:0; } 51%,88% { max-width:1.7em; opacity:1; } 91%,100% { max-width:0; opacity:0; } }
@keyframes mx-dot { 0%,44% { opacity:0; transform:scale(0.3); } 52%,88% { opacity:1; transform:scale(1); } 91%,100% { opacity:0; transform:scale(0.3); } }
@keyframes mx-caret {
  0%,3% { opacity:1; } 4%,7% { opacity:0.14; } 8%,11% { opacity:1; }
  12%,15% { opacity:0.14; } 16%,19% { opacity:1; } 20%,23% { opacity:0.14; }
  24%,31% { opacity:1; } 35%,100% { opacity:0; }
}
@keyframes mx-face { 0%,36% { background:var(--mx-yuz); } 40%,46% { background:var(--mx-yuz-basili, #15120f); } 51%,100% { background:var(--mx-yuz); } }
@keyframes mx-press { 0%,36% { transform:translateY(0); } 40%,46% { transform:translateY(0.087em); } 51%,100% { transform:translateY(0); } }

/* ── Hareket duyarlılığı ──────────────────────────────────────────────
 * Animasyonu kapatmak TEK BAŞINA yetmez: harfler `max-width:0` ile
 * başlıyor, yani animasyonsuz kalan bir logoda kelimenin çoğu görünmez
 * olurdu — hareketten rahatsız olan kullanıcıya bozuk bir logo. Bu yüzden
 * harfler burada açıkça görünür kılınıyor ve logo statik hâline dönüyor.
 */
@media (prefers-reduced-motion: reduce) {
  .mx-logo.canli .mx-kap,
  .mx-logo.canli .mx-yuz,
  .mx-logo.canli .mx-h,
  .mx-logo.canli .mx-son,
  .mx-logo.canli .mx-imlec { animation: none; }
  .mx-logo.canli .mx-yuz { background: var(--mx-yuz); }
  .mx-logo.canli .mx-h { max-width: none; opacity: 1; }
  .mx-logo.canli .mx-son { opacity: 1; transform: none; }
  /* "x" yalnızca kısaltma anında görünen bir harf; duran logoda
     "medxexpander" yazmaması için gizleniyor. */
  .mx-logo.canli .mx-y4 { display: none; }
  .mx-logo.canli .mx-imlec { display: none; }
}