/* /google-tag-manager-kurulumu — ankara-server-companies.css (.asr) üzerine GTM'e özel hero; diğer modüller kendi sayfalarının CSS'inden gelir */

/* ---- Hero: ürün sayfasında tıklama → önizleme panelinde olay, çalışan etiketler ve gönderilen veri ----
   Tüm animasyonlar aynı 7 sn döngüde; yüzdeler tıklama anına (%34) göre sıralıdır. */
.gtm{--gtm-loop:7s}
.gtm-debug{position:relative;z-index:1;margin-top:64px;border:1px solid hsla(0,0%,100%,.1);border-radius:12px;background-color:#070b16;text-align:left;overflow:hidden;box-shadow:0 30px 80px rgba(59,130,246,.18)}
.gtm-debug strong{font-weight:var(--font-weight-600)}
.gtm-debug__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid hsla(0,0%,100%,.08)}
.gtm-debug__dots{display:flex;gap:6px}
.gtm-debug__dots i{width:10px;height:10px;border-radius:100px;background-color:hsla(0,0%,100%,.12)}
.gtm-debug__url{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:6px;background-color:hsla(0,0%,100%,.06);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-12);color:var(--slate-300)}
.gtm-debug__url svg{color:var(--success)}
.gtm-debug__mode{display:inline-flex;align-items:center;justify-self:end;gap:8px;padding:4px 10px;border:1px solid rgba(59,130,246,.45);border-radius:100px;font-size:var(--font-size-12);font-weight:var(--font-weight-600);color:var(--azure-radiance-400)}
.gtm-debug__mode i{width:8px;height:8px;border-radius:100px;background-color:var(--azure-radiance-400);animation:gtm-pulse 1.6s ease-out infinite}
.gtm-debug__body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}

/* Sol: açık renkli ürün sayfası */
.gtm-site{position:relative;padding:24px 28px 32px;background-color:var(--white)}
.gtm-site__nav{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--slate-100)}
.gtm-site__nav b{width:64px;height:12px;border-radius:4px;background-color:var(--slate-800)}
.gtm-site__nav i{width:44px;height:8px;border-radius:4px;background-color:var(--slate-200)}
.gtm-site__nav span{position:relative;margin-left:auto;color:var(--slate-500)}
.gtm-site__nav em{position:absolute;top:-6px;right:-8px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:100px;background-color:var(--azure-radiance-500);font-size:10px;font-style:normal;font-weight:var(--font-weight-700);color:var(--white);animation:gtm-badge var(--gtm-loop) ease-out infinite}
.gtm-site__product{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:24px;margin-top:24px}
.gtm-site__image{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:10px;background:linear-gradient(135deg,var(--azure-radiance-50),var(--slate-100));color:var(--azure-radiance-500)}
.gtm-site__info{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.gtm-site__crumb{font-size:var(--font-size-12);color:var(--slate-400)}
.gtm-site__info strong{font-size:var(--font-size-18);line-height:var(--line-height-24);color:var(--slate-900)}
.gtm-site__price{font-size:var(--font-size-20);font-weight:var(--font-weight-700);color:var(--slate-900)}
.gtm-site__info>i{display:block;width:100%;height:7px;border-radius:4px;background-color:var(--slate-100)}
.gtm-site__info>i:nth-of-type(3){width:70%}
.gtm-site__btn{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:10px 18px;border-radius:100px;background-color:var(--azure-radiance-500);font-size:var(--font-size-14);font-weight:var(--font-weight-600);color:var(--white);animation:gtm-press var(--gtm-loop) ease-in-out infinite}
.gtm-site__ring{position:absolute;inset:0;border:2px solid var(--azure-radiance-400);border-radius:100px;opacity:0;animation:gtm-ring var(--gtm-loop) ease-out infinite}
.gtm-site__cursor{position:absolute;right:14px;bottom:-16px;animation:gtm-cursor var(--gtm-loop) ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(15,23,42,.3))}
.gtm-site__chip{padding:3px 10px;border:1px dashed var(--azure-radiance-400);border-radius:6px;background-color:var(--azure-radiance-50);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-12);color:var(--azure-radiance-700);animation:gtm-show-a var(--gtm-loop) ease-out infinite}
.gtm-site__wa{position:absolute;right:20px;bottom:18px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:100px;background-color:var(--success);color:var(--white);box-shadow:0 6px 16px rgba(92,225,92,.35)}

/* Sağ: koyu önizleme paneli */
.gtm-panel{display:grid;grid-template-columns:170px minmax(0,1fr);background-color:#0b1120;border-left:1px solid hsla(0,0%,100%,.06)}
.gtm-panel__label{display:block;margin-bottom:10px;font-size:11px;font-weight:var(--font-weight-600);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500)}
.gtm-panel__events{padding:20px 14px;border-right:1px solid hsla(0,0%,100%,.06)}
.gtm-panel__events ol{display:flex;flex-direction:column;gap:6px}
.gtm-panel__events li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px}
.gtm-panel__events li>span:last-child{display:flex;flex-direction:column;min-width:0;font-size:11px;line-height:16px;color:var(--slate-500)}
.gtm-panel__events strong{overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-12);font-weight:var(--font-weight-500);line-height:var(--line-height-18);white-space:nowrap;text-overflow:ellipsis;color:var(--slate-300)}
.gtm-panel__num{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:6px;background-color:hsla(0,0%,100%,.06);font-size:11px;font-weight:var(--font-weight-600);color:var(--slate-400)}
.gtm-panel__events li.is-active{background-color:rgba(59,130,246,.16);box-shadow:inset 2px 0 0 var(--azure-radiance-500);animation:gtm-show-b var(--gtm-loop) ease-out infinite}
.gtm-panel__events li.is-active strong{color:var(--white)}
.gtm-panel__events li.is-active .gtm-panel__num{background-color:var(--azure-radiance-500);color:var(--white)}
.gtm-panel__detail{display:flex;flex-direction:column;padding:20px 18px}
.gtm-panel__title{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid hsla(0,0%,100%,.06);font-size:var(--font-size-12);color:var(--slate-500);animation:gtm-show-b var(--gtm-loop) ease-out infinite}
.gtm-panel__title code{align-self:flex-start;padding:3px 8px;border-radius:4px;background-color:rgba(59,130,246,.16);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--font-size-14);color:var(--azure-radiance-400)}
.gtm-panel__tags{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.gtm-panel__tags li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid hsla(0,0%,100%,.06);border-radius:8px;background-color:hsla(0,0%,100%,.03)}
.gtm-panel__tags li>span:last-child{display:flex;flex-direction:column;font-size:11px;line-height:16px;color:var(--slate-500)}
.gtm-panel__tags strong{font-size:var(--font-size-14);line-height:var(--line-height-20);color:var(--slate-100)}
.gtm-panel__state{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;border-radius:100px}
.gtm-panel__tags li.is-fired{border-color:rgba(92,225,92,.25)}
.gtm-panel__tags li.is-fired .gtm-panel__state{background-color:rgba(92,225,92,.16);color:var(--success)}
.gtm-panel__tags li.is-fired>span:last-child{color:var(--success)}
.gtm-panel__tags li.is-idle{opacity:.6}
.gtm-panel__tags li.is-idle .gtm-panel__state{background-color:hsla(0,0%,100%,.06);color:var(--slate-500)}
.gtm-panel__tags li:nth-child(1){animation:gtm-show-c var(--gtm-loop) ease-out infinite}
.gtm-panel__tags li:nth-child(2){animation:gtm-show-d var(--gtm-loop) ease-out infinite}
.gtm-panel__tags li:nth-child(3){animation:gtm-show-e var(--gtm-loop) ease-out infinite}
.gtm-panel__vars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;animation:gtm-show-f var(--gtm-loop) ease-out infinite}
.gtm-panel__vars div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:6px;background-color:hsla(0,0%,100%,.04);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gtm-panel__vars dt{font-size:11px;color:var(--slate-500)}
.gtm-panel__vars dd{font-size:var(--font-size-14);color:var(--azure-radiance-400)}

@keyframes gtm-pulse{0%{box-shadow:0 0 0 0 rgba(96,165,250,.5)}100%{box-shadow:0 0 0 8px rgba(96,165,250,0)}}
@keyframes gtm-cursor{0%,6%{opacity:0;transform:translate(90px,70px)}12%{opacity:1;transform:translate(90px,70px)}30%{transform:translate(0,0)}34%{transform:translate(0,0) scale(.85)}38%,84%{opacity:1;transform:translate(0,0) scale(1)}92%,100%{opacity:0;transform:translate(0,0)}}
@keyframes gtm-press{0%,32%,38%,100%{transform:none}34%{transform:scale(.96)}}
@keyframes gtm-ring{0%,33%{opacity:0;transform:scale(1)}35%{opacity:.9;transform:scale(1)}52%,100%{opacity:0;transform:scale(1.35,1.8)}}
@keyframes gtm-badge{0%,36%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.2)}44%,90%{opacity:1;transform:scale(1)}96%,100%{opacity:0}}
@keyframes gtm-show-a{0%,36%{opacity:0;transform:translateY(4px)}40%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes gtm-show-b{0%,40%{opacity:0;transform:translateY(4px)}44%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes gtm-show-c{0%,46%{opacity:0;transform:translateY(4px)}50%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes gtm-show-d{0%,52%{opacity:0;transform:translateY(4px)}56%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes gtm-show-e{0%,58%{opacity:0;transform:translateY(4px)}62%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes gtm-show-f{0%,62%{opacity:0;transform:translateY(4px)}66%,90%{opacity:1;transform:none}96%,100%{opacity:0}}

@media (max-width:1199px){.gtm-panel{grid-template-columns:1fr}.gtm-panel__events{border-right:0;border-bottom:1px solid hsla(0,0%,100%,.06)}.gtm-panel__events ol{flex-direction:row;flex-wrap:wrap}}
@media (max-width:1023px){
  .gtm-debug{margin-top:48px}
  .gtm-debug__body{grid-template-columns:1fr}
  .gtm-panel{border-left:0;border-top:1px solid hsla(0,0%,100%,.06)}
}
@media (max-width:575px){
  .gtm-debug__bar{grid-template-columns:1fr auto}
  .gtm-debug__dots{display:none}
  .gtm-debug__url{justify-self:start;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}
  .gtm-site{padding:18px 18px 28px}
  .gtm-site__product{grid-template-columns:1fr;gap:16px}
  .gtm-site__image{aspect-ratio:2/1}
  .gtm-panel__vars{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .gtm-debug *{animation:none!important}
  .gtm-site__ring{opacity:0}
}