.ayberk-slider-arrow { width: 3rem; height: 3rem; display: grid; place-items: center; padding: 0; color: var(--ayberk-color-primary); background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.18); border-radius: 50%; transition: color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease; }
.ayberk-slider-arrow:hover { color: var(--ayberk-color-primary-hover); background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.32); transform: scale(1.035); }
.ayberk-home-materials__carousel { position: relative; }
.ayberk-home-materials__track { display: flex; gap: 1.25rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-y; }
.ayberk-home-materials__track::-webkit-scrollbar { display: none; }
.ayberk-material-card { flex: 0 0 calc((100% - 3.75rem)/4); min-width: 0; overflow: hidden; scroll-snap-align: start; background: #fff; border: 1px solid var(--ayberk-color-line); border-radius: 1rem; transition: border-color .22s ease,box-shadow .22s ease,transform .22s ease; }
.ayberk-material-card:hover { border-color: #b9d9ff; box-shadow: var(--ayberk-shadow-card); transform: translateY(-4px); }
.ayberk-material-card__media { aspect-ratio: 1.08/1; overflow: hidden; background: #e9edf2; }
.ayberk-material-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ayberk-ease); }
.ayberk-material-card:hover img { transform: scale(1.045); }
.ayberk-material-card__body { padding: 1.2rem 1.25rem 1.35rem; }
.ayberk-material-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.ayberk-material-card p { margin: .3rem 0 0; color: var(--ayberk-color-muted); font-size: .82rem; }
.ayberk-home-materials__carousel > .ayberk-slider-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); }
.ayberk-home-materials__carousel > .ayberk-slider-arrow:hover { transform: translateY(-50%) scale(1.035); }
.ayberk-slider-arrow--left { left: -1.5rem; }
.ayberk-slider-arrow--right { right: -1.5rem; }
@media (max-width: 1100px) { .ayberk-material-card { flex-basis: calc((100% - 1.25rem)/2); } .ayberk-slider-arrow--left { left: -.75rem; } .ayberk-slider-arrow--right { right: -.75rem; } }
@media (max-width: 640px) { .ayberk-material-card { flex-basis: 86%; } .ayberk-home-materials__carousel > .ayberk-slider-arrow { display: none; } }