/* code by dagasan — animasyonlu marka imzası
   Kullanım: <span class="dagasan" data-imza></span>  (imza.js içini doldurur)
   Renk: --dg (yazı), --dg-vurgu (</> ve kalem çizgisi). Boyut: font-size. */
.dagasan {
  --dg: currentColor;
  --dg-vurgu: #B0832C;
  display: inline-flex; align-items: center; gap: .5em;
  font-size: 18px; line-height: 1; color: inherit; text-decoration: none;
  padding: .35em .25em .55em; position: relative; cursor: default; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dg-kod { width: 2.15em; height: 1.25em; overflow: visible; flex-shrink: 0; }
.dg-kod path { fill: none; stroke: var(--dg-vurgu); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.dg-metin { display: inline-flex; align-items: baseline; gap: .38em; white-space: nowrap; }
.dg-code { font: 500 .6em/1 ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace; letter-spacing: .1em; color: var(--dg); opacity: 0; transform: translateY(.35em); display: inline-block; }
.dg-ad { position: relative; display: inline-block; font: 500 1.6em/1 'Caveat', 'Segoe Script', cursive; color: var(--dg); clip-path: inset(-30% 101% -60% -4%); }
.dg-alt { position: absolute; left: -2%; right: -6%; bottom: -.32em; width: 108%; height: .42em; overflow: visible; }
.dg-alt path { fill: none; stroke: var(--dg-vurgu); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; }
.dg-imlec { width: .09em; height: 1em; background: var(--dg-vurgu); margin-left: .12em; align-self: center; opacity: 0; border-radius: 1px; }

/* oynatma (görünür olunca imza.js ekler) */
.dagasan.dg-oynat .dg-c1 { animation: dgCiz .55s cubic-bezier(.6, 0, .2, 1) forwards; }
.dagasan.dg-oynat .dg-c3 { animation: dgCiz .55s cubic-bezier(.6, 0, .2, 1) .14s forwards; }
.dagasan.dg-oynat .dg-c2 { animation: dgCiz .4s cubic-bezier(.6, 0, .2, 1) .36s forwards; }
.dagasan.dg-oynat .dg-code { animation: dgBelir .45s cubic-bezier(.2, .8, .2, 1) .55s forwards; }
.dagasan.dg-oynat .dg-ad { animation: dgYaz 1.05s cubic-bezier(.45, .05, .35, 1) .72s forwards; }
.dagasan.dg-oynat .dg-alt path { animation: dgCiz .7s cubic-bezier(.6, 0, .2, 1) 1.55s forwards; }
.dagasan.dg-oynat .dg-imlec { animation: dgImlec 1.1s steps(1) 2.1s infinite; }
@keyframes dgCiz { to { stroke-dashoffset: 0; } }
@keyframes dgBelir { to { opacity: .72; transform: none; } }
@keyframes dgYaz { to { clip-path: inset(-30% -6% -60% -4%); } }
@keyframes dgImlec { 0% { opacity: 1; } 50% { opacity: 0; } }

/* üzerine gelince */
.dagasan:hover .dg-c1 { transform: translateX(-3px); }
.dagasan:hover .dg-c3 { transform: translateX(3px); }
.dagasan:hover .dg-c2 { transform: rotate(14deg); }
.dagasan:hover .dg-ad { color: var(--dg-vurgu); transition: color .3s; }
.dagasan .dg-ad { transition: color .3s; }

/* koyu zeminler */
.dagasan.koyu { --dg: #F3EAD8; --dg-vurgu: #D9B56A; }

@media (prefers-reduced-motion: reduce) {
  .dagasan .dg-kod path, .dagasan .dg-alt path { stroke-dashoffset: 0 !important; animation: none !important; }
  .dagasan .dg-code { opacity: .72 !important; transform: none !important; animation: none !important; }
  .dagasan .dg-ad { clip-path: none !important; animation: none !important; }
  .dagasan .dg-imlec { display: none; }
}