/* Ana sayfa "Veliler için" bölümü (animasyonlu). Kaynak: tasarım "Web sitesi — Veliler için bölümü". */
.vi-sec{background:#FFFFFF;color:#1B1F3B;font-family:'Nunito',system-ui,sans-serif;padding:80px 20px}
.vi-sec a{color:#B4551A}.vi-sec a:hover{color:#8E4114}
@keyframes vi-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes vi-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vi-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes vi-swap{0%,40%{opacity:1;transform:none}50%,90%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:none}}
@keyframes vi-swap2{0%,40%{opacity:0;transform:translateY(10px)}50%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px)}}
.anim .vi-card{animation:vi-up .8s cubic-bezier(.2,.8,.2,1) backwards}
.anim .vi-bar{transform-origin:0 50%;animation:vi-bar 1.2s cubic-bezier(.2,.8,.2,1) .5s backwards}
.anim .vi-bob{animation:vi-bob 3.2s ease-in-out infinite}
.vi-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.vi-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(27,31,59,.08);border-color:#F2C9A8}
@media (prefers-reduced-motion: reduce){.anim *{animation:none !important}}
/* Dar ekranda başlık sayfanın diğer başlıkları gibi küçülür; panel satırında etiket sütunu daralır */
@media (max-width: 520px){.vi-sec .vi-head{flex-wrap:wrap !important}}
@media (max-width: 760px){.vi-sec h2{font-size:clamp(34px,9vw,42px) !important}.vi-sec .vi-row{grid-template-columns:96px minmax(0,1fr) 48px !important}}