/* Vuvito özellik ögesi (FeatureGrid içinde)
 *
 * Renkler ve davranış ebeveynden CSS değişkeniyle iner:
 *   --vt-feat-icon             ikon rengi
 *   --vt-feat-icon-bg          ikon kutusu zemini
 *   --vt-feat-icon-border      ikon kutusu çerçeve rengi
 *   --vt-feat-icon-border-w    çerçeve kalınlığı (0px = çerçeve yok)
 *   --vt-feat-lift             hover'da yükselme (0 = kapalı)
 *   --vt-feat-title-*   / --vt-feat-text-*  yazı boyutları
 */

.cc_lqof57t2_yE9zLtxrOm .vt-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: 8px;
  color: inherit;
  text-decoration: none;
}

.cc_lqof57t2_yE9zLtxrOm .vt-feat__icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  /* Cerceve: kalinlik 0 oldugunda kural gorunmez kalir, ayrica koseleri de
     bozmaz. `box-sizing: border-box` global oldugu icin cerceve eklendiginde
     kutu 64px'te kalir, ikon kaymaz. */
  border: var(--vt-feat-icon-border-w, 0px) solid
    var(--vt-feat-icon-border, transparent);
  border-radius: var(--radius-md);
  background: var(--vt-feat-icon-bg, var(--color-surface-alt));
  color: var(--vt-feat-icon, var(--color-accent));
  --vt-icon-stroke: 1.6;
  font-size: 28px; /* ikon 1em kutuda — boyutu bu belirler */
  transition: transform 300ms ease;
}

.cc_lqof57t2_yE9zLtxrOm .vt-feat:hover .vt-feat__icon-box {
  transform: translateY(calc(var(--vt-feat-lift, 8px) * -1));
}

.cc_lqof57t2_yE9zLtxrOm .vt-feat--link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 6px;
  border-radius: var(--radius-md);
}

.cc_lqof57t2_yE9zLtxrOm .vt-feat__title {
  margin: 0 0 12px;
  color: var(--color-text-primary);
  font-size: var(--vt-feat-title-m, 17px);
}

.cc_lqof57t2_yE9zLtxrOm .vt-feat__text {
  margin: 0;
  max-width: 34ch;
  color: var(--color-text-secondary);
  font-size: var(--vt-feat-text-m, 14px);
}

@media (min-width: 768px) {
  .cc_lqof57t2_yE9zLtxrOm .vt-feat__title { font-size: var(--vt-feat-title-d, 18px); }
  .cc_lqof57t2_yE9zLtxrOm .vt-feat__text { font-size: var(--vt-feat-text-d, 14px); }
}

@media (prefers-reduced-motion: reduce) {
  .cc_lqof57t2_yE9zLtxrOm .vt-feat__icon-box {
    transition: none;
  }

  .cc_lqof57t2_yE9zLtxrOm .vt-feat:hover .vt-feat__icon-box {
    transform: none;
  }
}

/* Serit modunda kart genisligi.
 *
 * ⚠️ Genislik EBEVEYNIN SECICISIYLE degil, miras alinan bir degiskenle
 * verilir. Ebeveyn `> * > *` gibi bir seciciyle bu karta ulasamiyor:
 * IkasComponentRenderer her cocugu kendi scope sinifiyla sariyor ve
 * derleyici ebeveynin seciciSini kendi scope'uyla nitelendiriyor, zincir
 * kopuyor. CSS custom property'leri ise her katmandan gecerek iner —
 * Grid32'nin karta oran gecirmesi de ayni yolu kullaniyor.
 *
 * `--vt-mscroll-w` yalnizca serit modunda yazilir; yazilmadiginda kural
 * yedek degere duser ama zaten izgara icinde flex-basis'in etkisi yoktur.
 */
@media (max-width: 768px) {
  .cc_lqof57t2_yE9zLtxrOm .vt-feat {
    flex: 0 0 var(--vt-mscroll-w, 86%);
    scroll-snap-align: center;
  }
}

/* Serit modunda TUM kartlar ayni boyda. `align-self: stretch` esnek kabin
   en uzun ogesine gore boy verir; ebeveynin `height: 100%` kurali kabin
   yuksekligi belirsiz oldugu icin `auto`ya dusup ise yaramiyordu. */
@media (max-width: 768px) {
  .cc_lqof57t2_yE9zLtxrOm .vt-feat {
    align-self: stretch;
    height: auto;
  }
}

/* Yuklenen ikon gorseli kutuya sigar, kirpilmaz — logolar ve cizimler
   kenarlarindan kesilmemeli. */
.cc_lqof57t2_yE9zLtxrOm .vt-feat__icon-img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  display: block;
}