/* GostCategoryIconItem — kategori şeridindeki tek öğe: ikon kutusu + etiket.
   Ölçüler ebeveynden miras alınır: `--gci-tile` (kutu kenarı). Özel
   değişkenler DOM'da kalıtıldığı için kapsam sınırı yoktur.
   Renk `inherit`: öğe kendi rengini dayatmaz, bölümün metin rengini izler. */

.cc_n2k0mxzk_ZlgRjcauiO .gcii {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g-space-2);
  color: inherit;
  text-decoration: none;
}

.cc_n2k0mxzk_ZlgRjcauiO .gcii__tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gci-tile, 88px);
  height: var(--gci-tile, 88px);
  /* Kutu, içinde bir görsel taşıyan çerçeve gibi okunur: sistemin tek
     yuvarlaklık değeri (medya köşesi). */
  border-radius: var(--g-radius-media);
  background: var(--g-surface);
  transition: background-color var(--g-dur) var(--g-ease);
}

/* İkon, kutunun ~%54'ü: kutu büyüdükçe ikon da orantılı büyür. */
.cc_n2k0mxzk_ZlgRjcauiO .gcii__icon {
  width: calc(var(--gci-tile, 88px) * 0.54);
  height: calc(var(--gci-tile, 88px) * 0.54);
}

/* Yumuşak yüzey hover'ı markanın camgöbeği tarafından gelir (vermilion'dan
   tint ÜRETİLMEZ — yasak palet kuralı). */
.cc_n2k0mxzk_ZlgRjcauiO .gcii--link:hover .gcii__tile, .cc_n2k0mxzk_ZlgRjcauiO .gcii--link:focus-visible .gcii__tile {
  background: var(--g-surface-cool);
}

.cc_n2k0mxzk_ZlgRjcauiO .gcii__label {
  font-size: var(--g-fs-meta);
  line-height: 1.4;
  font-weight: var(--g-w-medium);
  text-align: center;
  color: inherit;
  max-width: calc(var(--gci-tile, 88px) + var(--g-space-6));
}

/* Vurgulu etiket markanın aksiyon renginde (referans görseldeki turuncu
   etiketler); normal etiket metin rengini izler. */
.cc_n2k0mxzk_ZlgRjcauiO .gcii__label--on {
  color: var(--g-accent);
}

/* — Yeniden çizim animasyonu —
   SAYFA YENİLENMESİNDE ÇALIŞMAZ: animasyon yalnızca `.gcii--draw` sınıfıyla
   (hover/fokus ya da periyodik döngü) kurulur; ilk render'da sınıf yoktur.
   `pathLength="1"` sayesinde dasharray/offset 1 = yolun tamamı: sınıf eklenince
   çizgi bir an gizlenir ve animasyon offset'i 0'a çekerek baştan çizer.
   RENK: çizim sırasında hat TEMA RENGİNDE (marka vurgusu) başlar ve aynı süre
   içinde normal metin rengine döner — "animasyon olurken tema rengi" isteği.
   Sıra gecikmesi ebeveynden `--gci-delay` ile miras alınır. */
.cc_n2k0mxzk_ZlgRjcauiO .gcii--draw .gcii__icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    cc_n2k0mxzk_ZlgRjcauiO_gcii-draw 620ms var(--g-ease) forwards,
    cc_n2k0mxzk_ZlgRjcauiO_gcii-tint 620ms var(--g-ease) forwards;
  animation-delay: var(--gci-delay, 0ms);
}

/* Hover/fokus ile tetiklenen çizim beklemez: sıra gecikmesi sıfırlanır. */
.cc_n2k0mxzk_ZlgRjcauiO .gcii--draw.gcii--now .gcii__icon path {
  animation-delay: 0ms;
}

@keyframes cc_n2k0mxzk_ZlgRjcauiO_gcii-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Çizim boyunca hat rengi: tema vurgusu → öğenin kendi rengi. */
@keyframes cc_n2k0mxzk_ZlgRjcauiO_gcii-tint {
  from {
    stroke: var(--g-accent);
  }

  to {
    stroke: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc_n2k0mxzk_ZlgRjcauiO .gcii--draw .gcii__icon path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}