/* Şeyler işareti — galeri logosu, ana site menüsü ve kenar çubuğu kartı ortak kullanır.
   Boyut bağlamdan gelir (font-size); renk --mark yoksa sitenin mürekkebine düşer. */
.seyler-mark {
  display: inline-flex; align-items: baseline; gap: .3em;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400; line-height: 1; letter-spacing: 0;
  text-transform: lowercase;
  color: var(--mark, var(--ink-strong, #1a1714));
}
/* Kutu yazının tam yüksekliğinde: üstü "l"nin tepesi (.74em), altı "y"nin kuyruğu (.205em) */
.seyler-mark__icon { width: .945em; height: .945em; flex: none; position: relative; top: .205em; }
.seyler-mark__ball { fill: var(--mark-accent, #c4553a); transition: transform .45s ease; }

/* Ş'nin çengeli: simgedeki çizgiyle aynı eğimde (≈15°) kısa çizgi, ilk harfin altında */
.seyler-mark__word {
  position: relative; display: inline-block;
  --line-w: .27em; --line-h: .062em; --ball: .15em;
  --line-start: calc(.154em - var(--line-w) / 2);
}
.seyler-mark__word::after {
  content: ""; position: absolute; left: var(--line-start); bottom: calc(.06em - 1px);
  width: var(--line-w); height: var(--line-h);
  background: currentColor;
  transform: rotate(-15.4deg);
}

/* Üzerine gelince: daire çizgi boyunca yukarı çıkar; alt çizgi turuncuya dönüp zikzakla kelimenin
   sonuna gider, orada topa dönüşür, yuvarlanarak geri gelir ve yeniden çizgi olur. */
.seyler-mark:hover .seyler-mark__ball,
a:hover .seyler-mark .seyler-mark__ball { transform: translate(20px, -5.5px); }
.seyler-mark:hover .seyler-mark__word::after,
a:hover .seyler-mark .seyler-mark__word::after {
  animation: seyler-run 1.9s ease-in-out, seyler-zig 1.9s linear, seyler-morph 1.9s ease-in-out;
}
@keyframes seyler-run {
  0%, 100% { left: var(--line-start); }
  52%, 60% { left: calc(100% - var(--line-w)); }
}
@keyframes seyler-zig {
  0%, 10%, 20%, 30%, 40%, 52% { transform: rotate(-15.4deg); }
  5%, 15%, 25%, 35%, 46%      { transform: rotate(15.4deg); }
  60%, 92%                     { transform: rotate(0deg); }
  100%                         { transform: rotate(-15.4deg); }
}
@keyframes seyler-morph {
  0%, 100% { background: currentColor; width: var(--line-w); height: var(--line-h); border-radius: 0; }
  6%, 52%  { background: var(--mark-accent, #c4553a); width: var(--line-w); height: var(--line-h); border-radius: 0; }
  60%, 92% { background: var(--mark-accent, #c4553a); width: var(--ball); height: var(--ball); border-radius: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .seyler-mark .seyler-mark__word::after { animation: none !important; }
  .seyler-mark__ball { transition: none; }
}